title: Reactjs gets values of the only last selected records
body: <p><strong>Reactjs</strong> gets userid/values of the only last selected records.</p>
  
  <p>Here I have 3 records in the array via reactjs.</p>
  
  <pre><code>{ id: 1, name: "Tony", Age: "18" , gender: "male" },
  { id: 2, name: "John", Age: "21" , gender: "female"},
  { id: 3, name: "Luke", Age: "78" , gender: "male"},
  </code></pre>
  
  <p>whenever I select the  three records from checkbox and submit, only one records gets selected and alerted.</p>
  
  <p>That selected record always be the values/userid of the last checked box. </p>
  
  <p>What am trying to do is to ensure that the code selects and submit all the three records if their corresponding
  checbox is checked. In the code below I have also tried</p>
  
  <p><strong>arr.push()</strong> and <strong>arr.concat()</strong> method but cannot get it to work...</p>
  
  <p>Here is the coding so far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Application extends React.Component {
    constructor(props) {
      super(props);
      this.useridChanged = this.useridChanged.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
      this.state = {
        rec: [
          { id: 1, name: "Tony", Age: "18", gender: "male" },
          { id: 2, name: "John", Age: "21", gender: "female" },
          { id: 3, name: "Luke", Age: "78", gender: "male" },
        ],
        chrk: '',
      };
    }
  
  
    useridChanged(e) {
      this.setState({ chrk: e.target.value });
    }
  
    onSubmit(e) {
      //onSubmit = (e) =&gt; {
      e.preventDefault();
      const { chrk } = this.state;
  
      //let arr = [];
      //arr.concat(chrk);
  
      const arr = [];
      arr.push(chrk);
      alert(arr);
      console.log(arr);
  
  
      const data = { check: arr };
      console.log(data);
  
      /*
      send to database by axios
      axios.post('http://localhost/apidb_react/checkbox.php', data)
                .then(res =&gt; console.log(res.data));
      */
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;h3&gt;Get values of all Selected Records&lt;/h3&gt;
            &lt;form onSubmit={this.onSubmit}&gt;
              &lt;ul&gt;
              {this.state.rec.map((obj, i)=&gt;(
                &lt;li key={i}&gt;
                  &lt;input
                    type="checkbox"
                    name="chrk"
                    value={obj.id}
                    onChange = {this.useridChanged}
                  /&gt;
                  {obj.name} - {obj.Age}  - {obj.gender} 
                &lt;/li&gt;))}
              &lt;/ul&gt;
              &lt;button className="btn btn-primary"&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Application /&gt;,document.getElementById('app'));</code></pre>
  </div>
  </div>
  </p>