Why do we need to use bind() in ReactJS to access this.props or this.state?

Question

look at this code for example

   import React, { Component } from ‘react’;
    class App extends Component {
      constructor(props) {
        super(props);
        this.clickFunction = this.clickFunction.bind(this);
      }
      clickFunction() {
        console.log(this.props.value);
      }
      render() {
        return(
          <div onClick={this.clickFunction}>Click Me!</div>
        );
      }
    }

what's the purpose of bind(this) ? it binds the function clickFunction to the context of the object which clickFunction is already bound to , let me illustrate what i am trying to say with a normal javascript code :

class my_class {
  constructor() {
    this.run = this.run.bind(this)
  }
  run() {
    console.log(this.data)
  }
}
my_class.data = 'this is data'
new my_class().run() //outputs 'undefined'

and if you remove bind(this) it will give you the same results

  constructor() {
    this.run = this.run
  }

results :

new my_class().run() //still outputs 'undefined'

i am sure i am understanding something wrong and this might the worst question on earth however i am new to es6 and i am not used to classes yet so i apologize for that

Answer 1

Blame JavaScript not React. This is done to retain object instance when the function is going to be passed. Certainly, it must be semantically correct for the function to expect such object. Most common case is to bind this when passing object method. The keyword This depends on how the function is called not how/where it is created. The relationship to This should be maintained at invocation.

Consider:

class Welcome extends React.Component {
    render() {
      return <button onClick={this.sayName}>Say My 
           Name</button>;                        
    }

    sayName() {
      alert(this.props.name);
    }
}

In React, you invoke like this: . This renders a button. Clicking the button should trigger an alert with "Bob".

Except it doesn't. Because in the above example, this would be undefined in the sayName function.

What's happening inside the render function is that this refers to the current instance of our React component. That component has a sayName function defined, so this.sayName points to our function, just fine and dandy.

But what React is doing behind the scenes is assigning this.sayName to another variable. That is, it's just like this:

let onClick = this.sayName;
onClick(); // Technically a click event is passed 
to onClick

// but this doesn't matter for our purposes We get an error. Because this is undefined. This is extra confusing because in previous versions of React, React would "autobind" the event handler for you, so it would work. But at some point, Facebook decided to stop doing that, so ... here we are.

So how can we fix our component? We just do binding ourselves, like this:

<button onClick={this.sayName.bind(this)}>Say My 
Name</button>;

Or with ES6 syntax:

<button onClick={() => this.sayName()}>Say My 
Name</button>;

And it should work!