title: Adding items on a table row after a click in React
body: <p>I'm creating a form that displays its input on a table, and every time I click on submit, the 1st row is added and the second is added too but not on the table. I'm not sure what's the issue.I'm thinking it could be because of how I manipulated the arrays that store the states? if not, what could be?</p>
  
  <p>Here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Text(props) {
    var style = {
      paddingTop: 5,
      margin: 5
    };
    return (
      &lt;div&gt;
        &lt;div style={style}&gt; {props.label} &lt;/div&gt;
        &lt;input
          type="text"
          name={props.name}
          style={style}
          value={props.labelInputText}
          onChange={props.changeHandler}
        /&gt;
      &lt;/div&gt;
    );
  }
  function TableFormList(props) {
    
    return(
      &lt;table&gt;
      &lt;tr&gt;
     {props.headers.map((item,index) =&gt; &lt;th key={index}&gt;{item}&lt;/th&gt;)}
      &lt;/tr&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
            {props.formElements.map((item,index) =&gt; &lt;td key={index}&gt;{item}&lt;/td&gt; )}
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
      )
      }
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        firstName: "",
        lastName: "",
        items: []
      };
      this.changeHandler = this.changeHandler.bind(this);
      this.AddElementsOnSubmit = this.AddElementsOnSubmit.bind(this);
    }
    changeHandler(event) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
    AddElementsOnSubmit() {
      var firstName = this.state.firstName;
      var lastName = this.state.lastName;
  
      var elements = this.state.items.slice();
      elements.push(firstName, lastName);
      this.setState({ items: elements, firstName: "", lastName: "" });
    }
  
    render() {
      var style = {
        padding: 5,
        margin: 5
      };
      return (
        &lt;div&gt;
          &lt;Text
            label="First Name"
            name="firstName"
            labelInputText={this.state.firstName}
            changeHandler={this.changeHandler}
          /&gt;
  
          &lt;Text
            label="Last Name"
            name="lastName"
            labelInputText={this.state.lastName}
            changeHandler={this.changeHandler}
          /&gt;
  
     &lt;input
            type="submit"
            value="submit"
            style={style}
            onClick={() =&gt; this.AddElementsOnSubmit()}
          /&gt;
       
          &lt;div&gt;
            &lt;TableFormList
              headers={["First Name", "Last Name"]}
              formElements={this.state.items}
            /&gt;
            
  
          &lt;/div&gt;
          
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>