Event Handlers

Event handlers

React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.

Adding event handlers

To add an event handler, define event handlers as functions and then pass it as a prop to the appropriate JSX tag.

export default function Button() {
  function handleClick() {
    alert("You clicked me!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

Naming events

Event handler functions should be named according to the convention handle[Event], where [Event] is the name of the event you're handling. (e.g. onClick={handleClick}, onMouseEnter={handleMouseEnter})

Inline event handler

You can define an event handler inline in the JSX as well as below,

// Arrow function
<button onClick={() => {
    alert('You clicked me!');
}}></button>

// Typical JS function
<button onClick={function handleClick() {
    alert('You clicked me!');
}}></button>

info

Functions passed to event handlers must be passed, not called. For example:

/// passing a function (correct)
<button onClick={handleClick}></button>
// calling a function (incorrect)
<button onClick={handleClick()}></button>

The difference is subtle. In the first example, the handleClick function is passed as an onClick event handler. This tells React to remember it and only call your function when the user clicks the button.

In the second example, the () at the end of handleClick() fires the function immediately during rendering, without any clicks. This is because JavaScript inside the JSX { and } executes right away.

Passing event handlers as props

Event handlers can be passed as props from parent to child component and used in child component.

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

function UploadButton() {
  return <Button onClick={() => alert("Uploading!")}>Upload Image</Button>;
}

function DownloadButton() {
  return <Button onClick={() => alert("Downloading!")}>Download Image</Button>;
}

Event propogation

In React, you can stop event propagation and prevent the default behavior of an event using the stopPropagation() and preventDefault() methods, respectively. These methods are available on the event object passed to event handlers in React.

function MyComponent() {
  const handleClick = (e) => {
    // Prevent the default behavior of a click event (e.g., following a link)
    e.preventDefault();

    // Stop the propagation of the event to parent elements (bubbling phase)
    e.stopPropagation();

    // Your custom logic here
  };

  return <button onClick={handleClick}>Click me</button>;
}

If some parameter need to be passed to event handler along with event object, it can be done as below

function MyComponent() {
  const handleClick = (e, additionalParameter) => {
    // Prevent the default behavior of a click event (e.g., following a link)
    e.preventDefault();

    // Stop the propagation of the event to parent elements (bubbling phase)
    e.stopPropagation();

    // Your custom logic here, which can use additionalParameter
    console.log("Clicked with additional parameter:", additionalParameter);
  };

  return <button onClick={(e) => handleClick(e, "someValue")}>Click me</button>;
}

Event handlers​

Adding event handlers​

Naming events​

Inline event handler​

Passing event handlers as props​

Event propogation​