As we can see, the React approach to handling events is very similar to classic event management within HTML. However, there are some subtle differences to take into account.

HTML events are named using lowercase, while JSX events use camelCase. For example, in HTML, you should use the following syntax:

<li onclick="...">...</li>

But in JSX, you use this syntax:

<li onClick=...>...</li>

In HTML, you assign a string representing the invocation of a function, while in JSX, you assign a function, which is shown as follows:

<li onclick="showPrice()">...</li>
<li onClick={showPrice}>...</li>

Of course, you can assign any JavaScript expression returning or representing a function, like the one shown in the following example:

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

Finally, you can prevent the default behavior of most HTML events by returning false, while in JSX events, you need to explicitly call preventDefault. The following is a typical example:

<a href="#" onClick={(e) => { e.preventDefault();
console.log("Clicked");}}>Click</a>