Instructor: 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.
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.
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.
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.
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.
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.