title: Error dynamically updating an array list in ReactJs
body: <p>I am learning reactJS and so I am trying my hands on an example. This example has a form textfield that can add an item to an existing array on click of a button. I am having errors here as when I enter a text and click on the button, the array list is not updated except I try to make changes to the text entered in the textfield. This is what I am doing:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        currentName : '',
        arrays : ['john', 'james', 'timothy']
      }   
    }
    render() {
      const showNames =   this.state.arrays.map((thisName) =&gt; {
          const values = &lt;li&gt;{thisName}&lt;/li&gt;;
          return values;
       }); 
      const getText = (e) =&gt; {
          let value = e.target.value;
          this.setState({
            currentName : value
          })
      }
      const addToUsers =  () =&gt; {
        this.state.arrays.push(this.state.currentName)
      }
  
      return (
        &lt;div&gt;
          &lt;p&gt;Add new name to List&lt;/p&gt;&lt;br/&gt;
          &lt;form&gt;
            &lt;input type="text"  onChange={getText}/&gt;
            &lt;button type="button" onClick={addToUsers}&gt;Add User&lt;/button&gt; 
  
          &lt;/form&gt;
          &lt;ul&gt;
            {showNames}
          &lt;/ul&gt;
        &lt;/div&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>