title: React todo list displays todo onChange, not onSubmit
body: <p>I'm a bit new to React, and with all new programming endeavors I am building a todo app. Everything seems to be working correctly except for one issue: When I enter a todo into the input field and click "submit", the todo is pushed into my array, however it doesn't immediately display. It is only when I change the text inside the input that the todo is displayed. I'm guessing this has something to do with the rendering happening on the handleChange function and not the handleSubmit function. Any help would be greatly appreciated. </p>
  
  <p>Here is my AddTodo component</p>
  
  <pre><code>import React, { Component } from 'react';
  import App from "./App"
  import List from "./List"
  
  
  class AddTodo extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: '',
        array: []
      };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
       this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      event.preventDefault();
      var array = this.state.array
      array.push(this.state.value);
      console.log(array)
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form&gt;
            &lt;label&gt;
              Name:
              &lt;input type="text" value={this.state.value} onChange={this.handleChange} /&gt;
            &lt;/label&gt;
            &lt;input onClick={this.handleSubmit} type="submit" value="Submit" /&gt;
         &lt;/form&gt;
         &lt;List array={this.state.array}/&gt;
         &lt;/div&gt;
       );
     }
   }
  </code></pre>
  
  <p>And my List component</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class List extends Component{
    render(){
      return(
        &lt;div&gt;
        {
          this.props.array.map(function(item, index){
            return &lt;li key={index}&gt;{item}&lt;/li&gt;
          })
        }
        &lt;/div&gt;
      )
    }
  }
  
  export default List;
  </code></pre>