How can I understand 'bind'?

It is a little difficult for me to understand “this.handleClick = this.handleClick.bind(this)”, actually I don’t know what happened after we write this code, anybody can help me with this? And why we don’t use bind when we use 'this.props 'and ‘this.state’? Thanks

  **Your code so far**

class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    text: "Hello"
  };
  // Change code below this line
  this.handleClick = this.handleClick.bind(this);
  // Change code above this line
}
handleClick() {
  this.setState({
    text: "You clicked!"
  });
}
render() {
  return (
    <div>
      { /* Change code below this line */ }
      <button onClick = {this.handleClick}>Click Me</button>
      { /* Change code above this line */ }
      <h1>{this.state.text}</h1>
    </div>
  );
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Bind ‘this’ to a Class Method

Link to the challenge:

In essence, it is due to how the keyword this works in Javascript. FCC itself has an excellent article going over the details here

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.