title: Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
body: <p>Something that is puzzling me is why when I define a react component class, values contained in the <code>this</code> object are undefined in methods defined (<code>this</code> is available in lifecycle methods) within the class unless I use <code>.bind(this)</code> or define the method using an arrow function for example in the following code <code>this.state</code> will be undefined in the <code>renderElements</code> function because I did not define it with an arrow function and did not use <code>.bind(this)</code></p>
  <pre><code>class MyComponent extends React.Component {
      constructor() {
          super();
          this.state = { elements: 5 }
      }
  
      renderElements() {
          const output = [];
  
          // In the following this.state.elements will be undefined
          // because I have not used  .bind(this) on this method in the constructor
          // example: this.renderElements = this.renderElements.bind(this)
          for(let i = 0; i &lt; this.state.elements; i ++){
              output.push(&lt;div key={i} /&gt;);
          }
  
          return output;
      }
  
      // .this is defined inside of the lifecycle methods and 
      // therefore do not need call .bind(this) on the render method.
      render() {
          return (
              &lt;div onClick={this.renderElements}&gt;&lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>Then in the following example I do not need to use <code>.bind(this)</code> or an arrow function, <code>this</code> is available as expected in <code>speak</code> function</p>
  <pre><code>class Animal { 
      constructor(name) {
          this.name = name;
      }
      
      speak() {
          console.log(this.name + ' makes a noise.');
      }
  }
  
  class Dog extends Animal {
      speak() {
          console.log(this.name + ' barks.');
      }
  }
  
  var d = new Dog('Mitzie');
  d.speak();
  </code></pre>
  <p><a href="http://jsbin.com/cadoduxuye/edit?js,console" rel="nofollow noreferrer">http://jsbin.com/cadoduxuye/edit?js,console</a></p>
  <p>To clarify, my question is two part. One) why in the second code example  do I not need to call <code>.bind(this)</code> to the <code>speak</code> function, but I do in the React component for the <code>renderElements</code> function and Two) why do the lifecycle methods (render, componentDidMount, etc) already have access to the class' <code>this</code> object, but <code>renderElements</code> does not.</p>
  <p>In the React docs it says the following</p>
  <blockquote>
  <p>[React Component Class] Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance.</p>
  </blockquote>
  <p>But clearly they do, as the second code example I've posted shows.</p>
  <p><strong>Update</strong></p>
  <p>Both links in the first two comments show a working example of React classes NOT using <code>.bind(this)</code> on class methods and it works fine. But still in the docs is explicitly says you need to bind your methods, or use an arrow function. In a project using gulp and babel I can reproduce. Could it mean browsers have updated things?</p>
  <p><strong>Update 2</strong></p>
  <p>My initial code example had <code>this.renderElements()</code> called directly in the render function. That would work as expected without binding the function, or defining it with an arrow function. The issue occurs when I put the function as an <code>onClick</code> handler.</p>
  <p><strong>Update 3</strong></p>
  <blockquote>
  <p>The issue occurs when I put the function as an <code>onClick</code> handler.</p>
  </blockquote>
  <p>In fact it is not an issue at all. The context of <code>this</code> changes when passed to the onClick handler, so that's just how JS works.</p>