Search⌘ K
Home
Courses
The Road to React: The One with Class Components

Bindings

Explore the concept of method bindings in React ES6 class components to understand why 'this' can become undefined. Learn best practices for binding in constructors and using arrow functions for cleaner code. This lesson helps you avoid common bugs and improve component performance by mastering method binding techniques.

We'll cover the following...

It is important to learn about bindings in JavaScript classes when using React ES6 class components. In the following code, we bounded the class method onDismiss() in the constructor like this:

Javascript (babel-node)
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list,
    };
    this.onDismiss = this.onDismiss.bind(this);
  }
  ...
}

The binding step is necessary because class methods don’t automatically bind this to the class instance. Let’s demonstrate it with the help of the following ES6 class component:

Javascript (babel-node)
class ExplainBindingsComponent extends Component {
  onClickMe() {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={this.onClickMe}
        type="button"
      >
        Click Me
      </button>
    );
  }
}

The component renders just fine, but when you click the button, you see undefined in your developer console log. This is one of the main sources of bugs developers encounter ...