title: Understanding state input in react
body: <p>I have a method <code>submitMessage</code> that is supposed to concatenate the current message that has been stored in my input state and then clear it:</p>
  
  <pre><code>submitMessage() {
    this.setState({
      input: '',
      messages : [...this.state.messages, this.state.input]
    });
  }
  </code></pre>
  
  <p>The method is working as intended and the whole app too, what I don't understand is why input can be cleared before the concatenate, is input and <code>this.state.input</code> not in the same place in memory ?</p>
  
  <p>Here is my full code:</p>
  
  <pre><code>class DisplayMessages extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        input: '',
        messages: []
      }    
    }
    handleChange(event) {
      this.setState({
        input: event.target.value,
        messages: this.state.messages
        })
    }
    submitMessage() {
      this.setState({
        input: '',
      messages : [...this.state.messages, this.state.input]
      })
    }
    render() {
      return (
        &lt;div&gt;
          &lt;h2&gt;Type in a new Message:&lt;/h2&gt;
          &lt;input onChange={this.handleChange.bind(this)} value={this.state.input} /&gt;
          &lt;button onClick={this.submitMessage.bind(this)}&gt;Submit&lt;/button&gt;
          &lt;ul&gt;{this.state.messages.map((item) =&gt; {
              return &lt;li key={item + 1}&gt;{item}&lt;/li&gt;
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  };
  </code></pre>