title: Uncaught ReferenceError in React project
body: <p>I'm working on a tiny project for learning React and I got stuck.</p>
  
  <p><strong>My problem:</strong> When a post request called, I get: "Uncaught ReferenceError: val is not defined". Someone can figure out why??</p>
  
  <p>In addition, I want the ul to re-render every new post created.
  If I changed this:</p>
  
  <pre><code>handleSend(msg){
          this.state.val.push(msg);
          this.setState({val});
      }
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>handleSend(msg){
          this.state.val.push(msg);
          this.setState({val: []});
      }
  </code></pre>
  
  <p>I don't get any errors but i need to refresh the page to see the new post on the ul.</p>
  
  <p><strong>This is my code:</strong>
  Hope you guys can figure it out and help me :)</p>
  
  <pre><code>  class CoachPage extends React.Component {
  
    constructor(props, context) {
      super(props, context);
      this.state={
        val: []
      };
    }
  
    handleSend(msg){
      this.state.val.push(msg);
      this.setState({val});
  }
  
  componentDidMount(){
    fetch('http://localhost:3003/api/msgs/')
      .then( res =&gt; res.json())
      .then( data =&gt; this.setState({ val: data }))
      .catch( console.error ); 
  }
  
   deleteMsg(id){
      return fetch('http://localhost:3003/api/msgs/' + id, {
        method: 'DELETE'
      })
        .then(response =&gt;
          response.json()
        .then(json =&gt; {
          return json;
        })
      );
    }
  
    render() {
      return (
        &lt;div className="container"  style={{color: '#FFF', textAlign: 'right'}}&gt;
          &lt;h1&gt;Coach Page&lt;/h1&gt;
          &lt;AddMsg onSend={this.handleSend.bind(this)}/&gt;
          &lt;Panel header="עדכונים" bsStyle="info" style={{float: 'left', textAlign: 'right', width: '40em'}}&gt;
          &lt;ul id="coach-panel-content"&gt;
          { 
            this.state.val.map( (msg, index) =&gt;
              &lt;li dir="rtl" key={index} className='myli'&gt;
                {msg.msgdata}
                &lt;span onClick={() =&gt; this.deleteMsg(msg._id)}&gt;X&lt;/span&gt;
                &lt;hr/&gt;
              &lt;/li&gt;
            )
          }
          &lt;/ul&gt;
          &lt;/Panel&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CoachPage;
  </code></pre>