title: React use .push to add to an array with onClick
body: <p>I am attempting to add to my existing array which is called players (which is an external file "players.js" that's imported into my parent).</p>
  
  <p>I can write: </p>
  
  <pre><code> players.push({
    name: 'Maul',
    id: 26
  });
  </code></pre>
  
  <p>And that works as ID is used for the key and the name is updated in the array.  </p>
  
  <p>However if I write</p>
  
  <pre><code>   handleAddPlayer = () =&gt; {
      console.log('i am working');
      players.push({
        name: 'Maul',
        id: 26
      });
    };
  </code></pre>
  
  <p>And on my button I have</p>
  
  <pre><code>    &lt;div&gt;
        &lt;h4&gt;Add A Player&lt;/h4&gt;
        &lt;input /&gt;
        &lt;button onClick={this.handleAddPlayer}&gt;Press to Add Player&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And my state is as follows:</p>
  
  <pre><code>  this.state = {
    id: players.id,
    totalScore: 0,
    countInfo: [],
    evilName: '',
    color: '#6E68C5',
    scoreColor: '#74D8FF',
    fontAwe: 'score-icon',
    incrementcolor: '',
    scoreNameColor: 'white',
    glow: '',
    buttonStyle: 'count-button-start',
    players,
  };
  </code></pre>
  
  <p>It does not work.  </p>
  
  <p>From here I have two questions:</p>
  
  <ol>
  <li><p>why won't it update when I click the button but works before not as a function?</p></li>
  <li><p>I would like to put a name into the input and generate a unique key that's added into my array, players.js </p></li>
  </ol>
  
  <p>I've tried concatenate and had not a lot of success.</p>