Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
<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>