title: React.js setState not working
body: <p>Im a noob in React and trying to make a simple app for water phases where the user enters a number and then based on the value it should display the state of water, for example if he enters 212 it should say gas and for 12 it should say solid, but for some reason its not displaying the values correctly, Any help is greatly appreciated!!! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              msg: "liquid",
              temp: 0
          };
          this.handlenum1Change = this.handlenum1Change.bind(this);
      }
  
      handlenum1Change(evt) {
          console.log(evt.target.value);
          this.setState({
              temp: Number(evt.target.value)
          });
  
          let temp = this.state.temp
          if (temp &gt; 100) {
              this.setState({
                  msg: "boiling"
              })
          } else if (temp &lt; 32) {
              this.setState({
                  msg: "frozen"
              })
          } else {
              this.setState({
                  msg: "liquid"
              })
          }
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt; {this.state.msg} &lt;/h1&gt;
                  &lt;form className="form-inline"&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label&gt; Temp: &lt;/label&gt;
                          &lt;input type="number"  onChange={this.handlenum1Change} className="form-control" /&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById("root")
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>