What are Events in React?

Just like HTML DOM events, React can perform actions based on user events.React has the same events as HTML: click, change, mouseover etc.

1. Adding Events:

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot}  instead of onclick="shoot()".

Example:

JavaScript
function Cricket() {
    const drive = () => {
        alert("Great Shot!");
    }
    return (
        <button onClick={drive}>Take the shot!</button>
    );
}

Passing Arguments:

To pass an argument to an event handler, use an arrow function.

Example:

JavaScript
function Cricket() {
  const drive = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => drive("shot!")}>Take the shot!</button>
  );
}
PreviousNext