Handling Events in React

Handling events in React is like assigning a specific job to a doorbell button, so something happens exactly when it's pressed.

In this page:

Attaching a Click Handler
Passing Arguments to a Handler
Common Event Types

Attaching a Click Handler

To respond to a click, pass a function to the onClick prop on a JSX element. React calls that function whenever the user clicks the element, without you needing to manually add or remove a browser event listener.

Note: Define the handler as a named function above the return statement for readability, rather than always inlining it.

Warning: Writing onClick={handleClick()} calls the function immediately during render instead of when clicked -- always pass the function itself, not its result.

Example: Attaching a Click Handler

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function ClickMe() {
      function handleClick() {
        alert("Button clicked!");
      }
      return <button onClick={handleClick}>Click Me</button>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<ClickMe />);
  </script>
</body>
</html>

Passing Arguments to a Handler

When a handler needs extra information, like which item was clicked, wrap it in an inline arrow function so you can call it with arguments. This avoids calling the function immediately while still letting you pass custom data.

Note: Use onClick={() => handleClick(item)} whenever your handler needs a value from the surrounding scope.

Warning: Writing onClick={handleClick(item)} (without the arrow function) calls it immediately on every render instead of on click.

Example: Passing Arguments to a Handler

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function FruitList() {
      function handlePick(fruit) {
        alert("You picked: " + fruit);
      }
      return (
        <div>
          <button onClick={() => handlePick("Apple")}>Apple</button>
          <button onClick={() => handlePick("Banana")}>Banana</button>
        </div>
      );
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<FruitList />);
  </script>
</body>
</html>

Common Event Types

Besides onClick, React supports handlers for nearly every DOM event: onChange for input changes, onSubmit for form submissions, onMouseEnter/onMouseLeave for hover, and many more. All follow the same camelCase-prop, function-reference pattern.

Note: Hover over a JSX element's opening tag in most editors to see autocomplete suggestions for available event props.

Warning: Some events behave slightly differently than their HTML equivalents -- for example, React's onChange fires on every keystroke, unlike the native DOM change event which fires on blur.

Example: Common Event Types

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function HoverBox() {
      const [hovering, setHovering] = React.useState(false);
      return (
        <div
          onMouseEnter={() => setHovering(true)}
          onMouseLeave={() => setHovering(false)}
          style={{padding: "20px", background: hovering ? "lightyellow" : "white"}}
        >
          {hovering ? "Hovering!" : "Hover over me"}
        </div>
      );
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<HoverBox />);
  </script>
</body>
</html>

Common Mistakes

Calling the function immediately in the JSX (onClick={handleClick()}) instead of passing a reference (onClick={handleClick}).
Forgetting event handler prop names are camelCase (onClick, not onclick).
Trying to attach an event listener the way you would in plain HTML, with an inline string like onclick="doSomething()".

Chapter Summary

React event handlers are passed as camelCase props like onClick and onChange.
You pass a function reference to the handler, not a function call.
Inline arrow functions are commonly used for handlers that need arguments.
React wraps native browser events in its own SyntheticEvent system.

Browser Support

No browser-specific restrictions -- React's synthetic event system normalizes behavior across all supported browsers.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson State with Objects and Arrays Next Lesson → SyntheticEvent Explained

Handling Events in React

Attaching a Click Handler

Passing Arguments to a Handler

Common Event Types

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code