title: Render array of inputs in react
body: <p>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 directly). Unfortunately I dont know how to do this in react when the inputs are renderd using a map function.
  (I am converting a meteor blaze project to meteor react).</p>
  
  <p><em>Everything renders but how do I attach to change event so I can update my array of emails? onChange + value need to be set somehow.</em></p>
  
  <p>This is the map function</p>
  
  <pre><code>return this.data.emailGroup.emails.map((email) =&gt; {
              return (
                  &lt;div key={email} className="input-group"&gt;
                      &lt;input type="text" className="form-control" onChange={self.handleEmailListChange} value={email}/&gt;
  
                      &lt;div className="input-group-btn"&gt;
                          &lt;button type="button"
                                  className="btn btn-default remove-email"&gt;&lt;span
                              className="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              );
          });
  </code></pre>
  
  <p>The initial state(which is populated with data from the db:</p>
  
  <pre><code> getInitialState() {
        return {
            name : '',
            description: '',
            emails : [],
            newEmailAddress : ''
        }
      },
  </code></pre>
  
  <p>Upon request here is the render method(it requires a getContent method.The getcontent method is there because in meteor I need to wait for data so in the meantime I need a loading state.</p>
  
  <pre><code>   getContent() {
          return (
  
              &lt;div className="box box-success"&gt;
                  &lt;div className="box-header with-border"&gt;
                      &lt;h3 className="box-title"&gt;List of emails&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;form role="form" className="form-horizontal"&gt;
                      &lt;div className="box-body"&gt;
                          &lt;p&gt;Below is a list of email addresses which are added to this email group. If
                              you
                              want
                              to add more
                              you can add them one by one by inputting in the box below or add a list into
                              the
                              same box (email
                              addresses have to be seperated by either a space or ;) then press Add to add
                              to
                              the
                              list. You can edit
                              the addresses directly as well as remove them.&lt;/p&gt;
                          &lt;div className="input-group"&gt;
                              &lt;input type="text" className="form-control"
  
                                     value={this.state.newEmailAddress}
                                     onChange={this.handleAddNewEmail}
                                     placeholder="Email addresses seperated by a space or a semicolon ; i.e. test1@test.se;test2@test.se"/&gt;
                      &lt;span className="input-group-btn"&gt;
                        &lt;button type="button" onClick={this.handleAddNewEmailButton} className="btn btn-info btn-flat add-email"&gt;Add&lt;/button&gt;
                      &lt;/span&gt;
                          &lt;/div&gt;
                          &lt;br/&gt;
                          {this.renderEmail()}
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      },
      render()
      {
      var contentStyle = {
          minHeight : '946px'
      };
          return (
              &lt;div className="content-wrapper" style={contentStyle}&gt;
                  &lt;section className="content-header"&gt;
                      &lt;h1&gt;
                          {this.data.emailGroup? this.data.emailGroup.name : 'hello'}
                      &lt;/h1&gt;
                      &lt;small&gt; Created by: Christian Klinton&lt;/small&gt;
                      &lt;br/&gt;
                      &lt;small&gt; Last updated by: Christian Klinton - 2015-11-12 08:10:11&lt;/small&gt;
                      &lt;ol className="breadcrumb"&gt;
                          &lt;li&gt;&lt;a href="/emailGroups"&gt;&lt;i className="fa fa-dashboard"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/emailGroups"&gt;Email groups&lt;/a&gt;&lt;/li&gt;
                          &lt;li className="active"&gt;{this.data.emailGroup? this.data.emailGroup.name : 'loading'}&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/section&gt;
                  &lt;section className="content"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-md-6"&gt;
                              &lt;div className="box box-primary"&gt;
                                  &lt;div className="box-header with-border"&gt;
                                      &lt;h3 className="box-title"&gt;Information&lt;/h3&gt;
  
                                  &lt;/div&gt;
                                  &lt;form role="form"&gt;
                                      &lt;div className="box-body"&gt;
                                          &lt;div className="form-group"&gt;
                                              &lt;label htmlFor="inputName"&gt;Name&lt;/label&gt;
                                              &lt;input type="email" className="form-control" id="name"
                                                     onChange={this.handleNameChange}
                                                     placeholder="Set the name of the email group" autoComplete="off"
                                                    value={this.state.name}/&gt;
                                          &lt;/div&gt;
  
                                          &lt;div className="form-group"&gt;
                                              &lt;label&gt;Description&lt;/label&gt;
                                      &lt;textarea className="form-control" rows="3" id="description"
                                                placeholder="Enter a description what and how the template is used..."
                                                onChange={this.handleDesriptionChange}
                                                value={this.state.description}
                                      &gt;&lt;/textarea&gt;
                                          &lt;/div&gt;
  
  
                                      &lt;/div&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-md-6"&gt;
                              {this.data.emailGroup? this.getContent() : &lt;p&gt;Loading&lt;/p&gt; }
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;div className="col-sm-offset-8 col-sm-4"&gt;
                                  &lt;div className="pull-right"&gt;
                                      &lt;button className="btn btn-primary"&gt;Delete all&lt;/button&gt;
                                      &lt;button className="btn btn-primary save"&gt;Save&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>