Aug 26, 2017 · 1 min read
I wrote a quick component that may fix this called RepeatBind. It would replace the this.state.users.map usage and be more declarative. Check it out: https://www.webpackbin.com/bins/-KsROfruSCLdKilcJ33h
I wonder if I’m on to something here. Like, what if there was a declarative component that handled mapping for us (and binding) similar to Angular’s ng-repeat?
So I’m passing RepeatBind an array of items, any number of handlers (in this case a single handler called ‘addItem’) and a function as a child. It will call the child function once per item. It will pass the function three params: the item, an object of handlers (all pre-bound to the item), and index (for keying).
<RepeatBind items={ items } addItem={ addItem }>
{ (item, { addItem }, i) =>
<button key={ i } onClick={ addItem }>{ item }</button> }
</RepeatBind>Thoughts?
