Beginning React

Event Handlers and the this Keyword

In the preceding example of defining a Product component, we assigned an arrow function to the onClick attribute, instead of the simple showPrice() method. This was not simply a matter of preference. It was necessary because we used the this keyword inside the showPrice() method.

In fact, when the event handler executes, the this keyword is no longer bound to the Product class, since it is asynchronously executed in a different context. This behavior does not depend on React, but on how JavaScript works.

In order to bind the method to the current class, we have a few options:

1. Use an arrow function and invoke the method inside its body, as shown in the following example:

<li onClick={() => this.showPrice()}> ...