Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Bind React class component methods to proper `this` without calling bind() in constructor

    Tomasz ŁakomyTomasz Łakomy
    reactReact

    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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss