title: ES6 React property is undefined
body: <p>I'm trying to get to work <a href="http://codepen.io/anon/pen/eZwZdw" rel="nofollow">this code</a>.</p>
  
  <pre><code>/*
   * A simple React component
   */
  class Application extends React.Component {
      num = 42;
      render() {
        return (
          &lt;button onClick={this.show}&gt;show&lt;/button&gt;
        );
      }
      componentDidMount() {
        console.log(this.num);
      }
      show() {
        console.log(this.num);
      }
  }
  
  /*
   * Render the above component into the div#app
   */
  React.render(&lt;Application /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>The problem is, when I click the button to get the property's value, it will be undefined. The interesting part is that the <code>ComponentDidMount()</code> function can access the <code>num</code> value.</p>
  
  <p>I think that the <code>show()</code> function has different context, and that's why I can't refer to <code>num</code> via <code>this</code> keyword. I tried to bind the <code>num</code> value in the constructor, but it didn't work either, so I removed it.</p>
  
  <p>Any idea how can I get the <code>num</code> value by clicking on the button? </p>