Render array of inputs in react

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) => (    <div key={index} className="door"></div>));

Here's the same solution applied to your problem:

return this.data.emailGroup.emails.map((email, index) => {    return (        <div key={index} className="input-group">            <input type="text"                   className="form-control"                   onChange={self.handleEmailListChange.bind(this, index)} value={email}/>        </div>    );});

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.}

I believe what you're looking for is something like this:

MyPage = React.createClass({  mixins: [ReactMeteorData],  getMeteorData() {    // ...  },  render() {    const emails = this.data.emailGroup.emails.map((email) => {      return (        <div key={email} className="input-group">          <input type="text" className="form-control"                 onChange={this.handleEmailListChange} value={email} />          <div className="input-group-btn">            <button type="button"                    className="btn btn-default remove-email"><span              className="glyphicon glyphicon-remove" /></button>          </div>        </div>      );    });    return <div>      {emails}    </div>  }});

I changed self to this. Since you're using the ES6 arrow function, there's no need to assign self = this.

You should place your Array.map directly inside your render() function. Just take care that each array element is wrapped inside a parent element (<div> here) and must have a unique key={}

class ArrayMap extends React.Component{  //your functions  handleEmailChanged(key){    // Handle email  }  render(){    return(      <div>        {          this.data.emailGroup.emails.map((email) => {            <div key={email.key}>              <button onClick={this.handleEmailChanged.bind(this,email.key)}/>            </div>          });        }      </div>    );  }}