Bind React class component methods to proper `this` without calling bind() in constructor
One of the common pitfalls when learning React is related to event handlers losing the reference to this pointing to the component when called. Common approach to solving this issue is to use a constructor and .bind() function to bind all class methods to this object, referring to the component itself.
It sometimes leads to a constructor which sole purpose is to bind a bunch of methods.
In this lesson we are going to learn how to use a public class field syntax (currently available in Babel stage-2 and enabled by default in create-react-app) to avoid having to create unnecessary constructors in order to bind a React component method to proper this
Instructor: [00:00] We have a simple React app, which displays a single button. Inside of this button, we are displaying the text, "Click Me," which is based on the default state. Whenever we are going to click the button, what we'd like to do is to trigger this handle click function, which is going to set the state to button clicked, and update the text inside of the button.
[00:18] Currently, it's not going to work. As soon as I click the button, I'm going to get an error that React is not able to interpret the set state of undefined. The reason it happens is because in this handle click, this does not refer to the component.
[00:33] It's actually undefined, therefore we have an error. One way we could fix that is to go ahead, create a constructor, and inside of this constructor, we're going to call it "super," and then what we would like to do is to this handle click equals this handle click bind this.
[00:51] Now, it's going to work just fine, because we are binding this handle click, while we're creating this component, to this object, and this, in this case, refers to the component itself. Now, if I click the button, it's going to work just fine. There's a slight issue with that code. We are creating this constructor, only to bind this handle click method, and this is not entirely necessary.
[01:15] To avoid having to bind this function like this, what we can do is to instead use the public class field syntax, which is available in Babel stage-2. To use that first, remove this constructor, and now we are going to create this handle click as a public class field. To do that we're going to do equals, and assign a arrow function to this handle click field.
[01:38] Now it's going to work just fine. The reason is works is that because in a public class field, this always refers to the class in which it was created. In this case, it's going to always refer to our component, so this handle click function always has access to this set state.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!