title: I cannot update my array state in react?
body: <p>This is my code, can't figure out why this doesn't udpate my react state?</p>
  
  <pre><code>state = {
      popUpMessages:[]
    }
    popUpMessage(id,name) {
      console.log("id ",id,"name ",name)
      const addUserObject = { id, name };
      const newArray = [...this.state.popUpMessages, addUserObject]
      console.log("newArray = ",newArray)
      this.setState({ popUpMessages: newArray });
    }
  </code></pre>
  
  <p>In this code popUpMessage gets invoked to update the state: </p>
  
  <pre><code>&lt;li  onClick={() =&gt; this.popUpMessage(this.props.id,this.props.name)}&gt;{this.props.name}&lt;/li&gt;
  </code></pre>
  
  <p>but my state is not updating and when I try to log, the previous user object is removed? I want my state to be array of objects something like this: </p>
  
  <pre><code>[{id:1, name: kim bok joo},{id:2, name: ria atayde}]
  </code></pre>