The Road to React: The One with Class Components/

...

/

Bindings

Bindings

Binding comes in very handy while creating React apps. You'll see how by as you go read this lesson.

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:

Press + to interact
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:

Press + to interact
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 ...

Access this course and 1400+ top-rated courses and projects.