Render array of inputs in react

Question

I have an array of emails (as a part of a bigger model). These are displayed in seperate rows witha remove button for each (the address itself can be updated in the input box d

Answer 1

React requires you to have something unique for every element in the rendered array, it's called a key, and it's an attribute.

If you don't know what to assign to the key, just assign it the array's indexes:

this.props.doors.map((door, index) => (
    

));

Here's the same solution applied to your problem:

return this.data.emailGroup.emails.map((email, index) => {
    return (
        

            
        
    );
});

Notice how I bound handleEmailListChange to receive the index of the modified email. If handleEmailListChange accepts an index, it can update the modified email within the state:

handleEmailListChange: function(index, event) {
    var emails = this.state.emails.slice(); // Make a copy of the emails first.
    emails[index] = event.target.value; // Update it with the modified email.
    this.setState({emails: emails}); // Update the state.
}