title: Adding dynamic states in reactJs
body: <p>I created a reactJs page that allows an admin add a user to a platform. Now, instead of submitting the form for each new user, the admin can add as many users as possible before submitting the form. By default, one table row containing input fields is displayed and then on click of the add button, a new row is added and the admin can fill the necessary details.</p>
  
  <p>I want to add an onChange event to the input fields for each new row. I don't know how to do as this is quite dynamic. The state will have to change as new rows is added. I don't know how to go about updating this state and adding the onChange event for each field in each row. Here is my existing code:</p>
  
  <pre><code>export default class Admins extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              errors : '',
              success : '',
              rows : [1]
          }
          this.addRow = this.addRow.bind(this);
          this.fetchRows = this.fetchRows.bind(this);
          this.removeRow = this.removeRow.bind(this);
      }
      addRow(){
          var last = this.state.rows[this.state.rows.length-1];
          var current = last + 1;
          this.setState({
              rows : this.state.rows.concat(current)
          });
      }
      removeRow(index){
          var array = this.state.rows;
          array.splice(index, 1)
          this.setState({
              rows : array
          })
      }
      fetchRows(){
          return this.state.rows.map((row, index) =&gt; (
              //console.log(row, index)
              &lt;tr key={row}&gt;
                  &lt;td className="text-center"&gt;
                      &lt;button type="button" onClick={(e)=&gt; this.removeRow(index)} data-toggle="tooltip" className="btn btn-xs btn-danger"
                              data-original-title=""&gt;&lt;i className="fa fa-trash"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" className="form-control" onChange={}/&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" className="form-control" onChange={}/&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" className="form-control" onChange={}/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          ));
      }
      render(){
          return(
              &lt;div&gt;
                  &lt;Top/&gt;
                  &lt;SideBar/&gt;
                  &lt;div className="breadcrumb-holder"&gt;
                      &lt;div className="container-fluid"&gt;
                          &lt;ul className="breadcrumb"&gt;
                              &lt;li className="breadcrumb-item"&gt;&lt;Link to="/"&gt;Dashboard&lt;/Link&gt;&lt;/li&gt;
                              &lt;li className="breadcrumb-item active"&gt;Admins&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;section className="forms"&gt;
                      &lt;div className="container-fluid"&gt;
                          &lt;header&gt;
                              &lt;h3 className="h5 display"&gt;Admins&lt;/h3&gt;
                          &lt;/header&gt;
  
                          &lt;div className="row"&gt;
                              &lt;div className="col-lg-6"&gt;
                                  &lt;h5 className="text-danger"&gt;{this.state.errors}&lt;/h5&gt;
                                  &lt;h5 className="text-success"&gt;{this.state.success}&lt;/h5&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="col-lg-6"&gt;
                                  &lt;div className="card"&gt;
                                      &lt;div className="card-header d-flex align-items-center"&gt;
                                          &lt;h5&gt;&lt;/h5&gt;
                                      &lt;/div&gt;
                                      &lt;div className="card-body"&gt;
                                          &lt;table className="table table-bordered"&gt;
                                              &lt;thead&gt;
                                              &lt;tr&gt;
                                                  &lt;th  width="5%"&gt;Actions&lt;/th&gt;
                                                  &lt;th&gt;Name&lt;/th&gt;
                                                  &lt;th&gt;Email&lt;/th&gt;
                                                  &lt;th&gt;Password&lt;/th&gt;
                                              &lt;/tr&gt;
                                              &lt;/thead&gt;
                                              &lt;tbody&gt;
                                                  {this.fetchRows()}
                                                  &lt;tr&gt;
                                                      &lt;td className="text-center"&gt;
                                                          &lt;button type="button" onClick={this.addRow} data-toggle="tooltip" className="btn btn-xs btn-primary"
                                                                  data-original-title=""&gt;&lt;i className="fa fa-plus"&gt;&lt;/i&gt;
                                                          &lt;/button&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/tbody&gt;
                                          &lt;/table&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>