Adding/removing input fields

Question

I\'m pretty new to ReactJS, I\'m liking it a lot, but there are some things like binding that seems to be easier in Angular.

I want to have a form, where a user can cli

Answer 1

Every <div className="input-group"> must have a unique key

<div className="input-group" key={index}>

That's how React distinguishes between collection of rendered nodes.

References:

• https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

UPD:

As @WiredPrairie mentioned below in the comments - the suggested solution is far from ideal, since the index is not unique enough. And instead you need to create another array with some unique identifiers (a monotonously growing sequence would be enough) and maintain it in parallel with this.state.inputs and use its values as keys.

So, on adding an element you:

this.keys.push(++this.counter);

on removing - remove from both by the same index. And in the .map you

<div className="input-group" key={this.keys[index]}>