Handling Events in React

Interactive screens in the React for Beginners series respond to clicks, keystrokes and submissions. React wraps the browser's event system in a familiar but slightly different API: camelCase handler props, functions passed by reference, and a synthetic event object that works identically across browsers. This chapter covers the patterns you will use in every application.

onClick and the camelCase rule

HTML attributes are lowercase (onclick); JSX props are camelCase (onClick). You pass a function reference, not a string and not the result of a call:

function LikeButton() {
  function handleClick() {
    console.log('Liked!');
  }

  return <button onClick={handleClick}>Like</button>;
}

Expected output: clicking the button prints Liked! to the console — once per click. The markup stays clean because the logic lives in a named function above it.

Pass, don't call

The single most common beginner bug is invoking the handler during render:

Need arguments? Wrap the call in an arrow function so it runs only when clicked: onClick={() => handleClick(id)}. This creates a new function each render, which is fine for ordinary buttons.

The event object

Handlers receive one argument: React's synthetic event, carrying the useful parts of the native event with cross-browser consistency. You get currentTarget, target, key, preventDefault() and more:

function SubmitForm() {
  function onSubmit(event) {
    event.preventDefault();          // stop the page from reloading
    const data = new FormData(event.target);
    console.log('Sending', data.get('email'));
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <button type="submit">Join</button>
    </form>
  );
}

Expected output: submitting prints Sending ada@example.com and the browser stays on the page — without preventDefault() a form submit reloads the document, which is exactly what plain DOM forms taught you to prevent.

Common events

Almost every event you know has a camelCase JSX twin. The ones you will type most:

Unlike HTML's on* string attributes, these props take real functions, so you can share one handler between many elements.

Updating state from events

Events are where state setters belong. Combining this chapter with the last one gives the standard loop — user acts, handler runs, state updates, React re-renders:

const [items, setItems] = useState([]);

function onAdd(name) {
  setItems((prev) => [...prev, { id: crypto.randomUUID(), name }]);
}

function onRemove(id) {
  setItems((prev) => prev.filter((item) => item.id !== id));
}

Expected output: calling onAdd('Vite') grows the list; onRemove(theId) shrinks it — each change producing exactly one re-render with the current list.

Event bubbling and stopPropagation

Events bubble from child to parent, just as in the DOM. If an inner control must not trigger its parent (a delete button inside a clickable card), call event.stopPropagation() inside the inner handler. Prefer restructuring the markup when you can — nesting interactive elements inside another interactive element is also an accessibility problem. React wires one listener per event at the root and dispatches through your component tree, so synthetic bubbling follows the same order you learned with native events: target handlers run first, then ancestors.

One detail differs from old React: there is no event pooling anymore, so you can safely read event.target.value asynchronously — inside a setTimeout or an awaited fetch — without the object being nulled out.

Common mistakes

• Invoking the handler in JSX — {save()} runs on every render; pass {save} or wrap it: () => save(id).
• Wrong letter case — onclick and onchange are silently ignored by React.
• Forgetting preventDefault() on forms — the page reloads and your state vanishes.
• Reading state right after the setter — the variable still holds the previous value until the next render.
• Stale closures in long-lived handlers — if a timer or subscription captures state, use the functional updater form or an effect (chapter 12).

Practice checklist

1. Add a working handleClick to the Like button and confirm one log per click.
2. Write the broken onClick={handleClick()} version, observe the immediate console noise, then fix it.
3. Build a form that logs its values with FormData and stops the browser reload.
4. Add an input that echoes what you type by writing its value into state.
5. Make Enter in the search input submit the form (onKeyDown or a submit button).

Events give you state to change — but what should the UI show while that state is one thing or another? That is Conditional Rendering.