Handling Events in React

React lets you respond to user interactions — clicks, typing, form submissions, mouse movement — by attaching event handler functions directly to JSX elements. Event handling in React looks similar to plain HTML's inline event attributes, but it works differently under the hood and follows JavaScript naming conventions instead of HTML ones.

Instead of lowercase HTML attributes like onclick="..." with a string of code, React uses camelCase props like onClick={handleClick}, where the value is an actual JavaScript function reference, not a string to be evaluated.

Why it matters

Clicks, typing and form submissions are how users drive an application. React's event handling looks like HTML's but differs in ways that trip people up: handlers are functions passed by reference, not strings, and a handler that is called instead of passed runs on every render.

Attaching Event Handlers

Common event props include onClick for clicks, onChange for input value changes, onSubmit for form submissions, and onMouseOver, onKeyDown, and many others that mirror native DOM events. You pass a function reference, not a function call: onClick={handleClick} is correct, while onClick={handleClick()} would incorrectly invoke the function immediately during render instead of waiting for the click.

Synthetic Events

React wraps native browser events in a cross-browser wrapper called a SyntheticEvent, which normalizes behavior across different browsers and provides the same familiar API (event.target, event.preventDefault(), event.stopPropagation()) regardless of which underlying browser event actually fired. This means you can write one consistent set of event-handling code without worrying about browser-specific quirks.

Passing Arguments to Handlers

Because onClick expects a function reference, passing extra arguments requires wrapping the call in an inline arrow function, for example onClick={() => handleDelete(item.id)}. This creates a new function on every render, which is usually fine for typical UI interactions, though it is something to be mindful of in performance-sensitive lists.

Example

import { useState } from 'react';

function SubscribeForm() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  function handleSubmit(event) {
    event.preventDefault(); // stops the browser's default full-page reload
    setSubmitted(true);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        placeholder="you@example.com"
      />
      <button type="submit">Subscribe</button>
      {submitted && <p>Thanks, {email}! You are subscribed.</p>}
    </form>
  );
}

export default SubscribeForm;

Typing into the input updates the field as you type; clicking "Subscribe" prevents the page from reloading and instead shows "Thanks, you@example.com! You are subscribed." below the form.

Exercise

Do this in src/App.jsx of a Vite + React project. Build a small form with a text input and a submit button. When the form is submitted, stop the browser from reloading the page and show the text that was entered in a paragraph below the form.

Expected result: typing a name and pressing Enter or the button shows "Hello, " followed by the name, without the page reloading.

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  const [greeting, setGreeting] = useState("");

  // TODO: function handleSubmit(event): prevent the default action and set the greeting

  return (
    <form /* TODO: attach the submit handler */>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button type="submit">Greet</button>
      <p>{greeting}</p>
    </form>
  );
}

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  const [greeting, setGreeting] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    setGreeting("Hello, " + name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button type="submit">Greet</button>
      <p>{greeting}</p>
    </form>
  );
}

Quick quiz

Interview questions