Tim Kindberg
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?

)

    Tim Kindberg

    Written by

    Tech Lead of Product Components at Kroger Digital in Cincinnati, OH.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade