Handling Events In React
Handling events with React elements is very similar to handling events on DOM elements.
The differences are syntactic.
In React, events are named using camelCase, rather than lowercase. Also with JSX you pass a function as the event handler, rather than a string.
For example:
HTML:

React:

In React, we can define a component using an ES6 class. When we use ES6 class to define a component, we generally make the event handler to be a method on the class.
In the example below, the Toggle component renders a button that lets the user toggle between on and off states:

There is one thing that you have to be careful with when using “this” in JSX callbacks. In JavaScript, class methods are not bound by default. If you don’t bind this.handleClick and pass it to onClick, this will be undefined when the function gets called.
This behavior is not React-specific but its is just how functions work in JavaScript. So if you refer a method with () after it, ex: (onClick={this.handleClick} ), you need to bind that method.

There are two ways to get around using bind.
First is, if you are using experimental public class fields syntax, you can use class fiends to correctly bind callbacks:

Second way is, if class fields syntax is not used, you can use an arrow function in the callback:

The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. Generally, it is recommend to bind in the constructor or using the class fields syntax, to avoid this sort of performance problem.
Passing Arguments to Event Handlers
Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if id is the row ID, either of the following would work:

The two examples above will do the same thing.
In both cases, the e argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind any further arguments are automatically forwarded.
Reference
React
