title: this.state.todos.map is not a function, React.js
body: <p>I'm making a simple Todo list which consists of a container <code>App</code> component as well as a child <code>Todo</code> stateless functional component.  When I create a new todo, I expect it to be added to the todos array that I have defined in the parent components state.  However, when I do so, I get the error: <code>Uncaught TypeError: this.state.todos.map is not a function</code>.  Can someone please help me understand why this is.</p>
  
  <p>Here is the parent component:</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 App extends Component {
    constructor(props){
     super(props);
     this.state = {
      input: '',
      todos: [
       'buy milk',
       'buy eggs',
       'take out trash'
      ]
     };
     this.handleSubmit=this.handleSubmit.bind(this);
     this.handleChange=this.handleChange.bind(this);
    }
  
    handleSubmit(e){
     let value = this.state.input;
     let todos = this.state.todos;
     let newTodos = todos.push(value);
     this.setState({todos: newTodos, input: ''});
  
    }
  
    handleChange(e){
     this.setState({input: e.target.value})
    }
  
  
    render() {
     let todolist = this.state.todos.map((value, index) =&gt; {
      return(
       &lt;ul&gt;
        &lt;Todo value={value} /&gt;
       &lt;/ul&gt;
      )
     })
      return (
        &lt;div&gt;
        &lt;h1&gt;My Todo list&lt;/h1&gt;
         &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;input 
           type='text'
           onChange={this.handleChange} 
           value={this.state.input}
           /&gt;
          &lt;input type='submit'/&gt;
         &lt;/form&gt;
        {todolist}
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the child component: </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>let Todo = (props) =&gt; {
   return(
    &lt;li&gt;{props.value}&lt;/li&gt;
   )
  };</code></pre>
  </div>
  </div>
  </p>