Event Handling

Responding to clicks, input, and other user interactions in React - synthetic events, passing arguments, and common patterns.

What it is, in plain English: React handles DOM events through a system called SyntheticEvent — a wrapper around the browser's native event that behaves consistently across all browsers. You attach event handlers as JSX props (onClick, onChange, onSubmit) set to a function. Unlike plain HTML, React event handler names are camelCase and you pass a function reference, not a string.

Responding to clicks and input

The basic pattern

function Button() {
  function handleClick() {
    console.log("Clicked!");
  }

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

// Key differences from plain HTML:
// HTML:  <button onclick="handleClick()">     ← lowercase, string
// React: <button onClick={handleClick}>        ← camelCase, function reference (no parens!)

Common mistake — calling the function instead of passing it

// ✗ WRONG — this calls handleClick IMMEDIATELY during render, not on click:
<button onClick={handleClick()}>Click</button>

// ✓ RIGHT — pass the function itself, React calls it later when clicked:
<button onClick={handleClick}>Click</button>

// ✓ RIGHT — or wrap in an arrow function (needed if passing arguments):
<button onClick={() => handleClick()}>Click</button>

Passing arguments to a handler

function TodoItem({ id, text, onDelete }) {
  return (
    <li>
      {text}
      {/* Need to wrap in arrow function to pass the id argument */}
      <button onClick={() => onDelete(id)}>Delete</button>
    </li>
  );
}

The event object

function Input() {
  const [value, setValue] = React.useState("");

  const handleChange = (event) => {
    console.log(event.target.value);  // the new input value
    setValue(event.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

// React wraps the native browser event in a SyntheticEvent —
// works consistently across all browsers. Most properties match
// the native DOM event (target, key, preventDefault(), etc.)

preventDefault — stopping default browser behaviour

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();   // stops the page from reloading on submit
    console.log("Form submitted!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

Try It Yourself (JSX)

// Event handling in React -- camelCase props, function references

function ClickDemo() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <button onClick={() => console.log("Inline handler!")}>
        Click me too
      </button>
      <button onClick={() => console.log("Specific item:", 42)}>
        Click with arg
      </button>
    </div>
  );
}

function SearchForm() {
  const [query, setQuery] = React.useState("");

const handleChange = (event) => {
    setQuery(event.target.value);
  };

const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Searching for:", query);
  };

return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={query} onChange={handleChange} placeholder="Search..." />
      <button type="submit">Search</button>
    </form>
  );
}

function HoverButton() {
  const [hovered, setHovered] = React.useState(false);

return (
    <button
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => console.log("Clicked while hovered:", hovered)}
    >
      {hovered ? "Hovering!" : "Hover me"}
    </button>
  );
}

function App() {
  return (
    <div>
      <ClickDemo />
      <SearchForm />
      <HoverButton />
    </div>
  );
}

Common event handler patterns

Handling multiple form fields with one handler

function SignupForm() {
  const [form, setForm] = React.useState({ name: "", email: "", password: "" });

  // One handler for ALL fields, using the input's 'name' attribute:
  const handleChange = (event) => {
    const { name, value } = event.target;
    setForm(prev => ({ ...prev, [name]: value }));  // computed property name
  };

  return (
    <form>
      <input name="name"     value={form.name}     onChange={handleChange} />
      <input name="email"    value={form.email}    onChange={handleChange} />
      <input name="password" value={form.password} onChange={handleChange} type="password" />
    </form>
  );
}

Keyboard events

function SearchBox() {
  const [query, setQuery] = React.useState("");

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      console.log("Search:", query);
    }
    if (event.key === "Escape") {
      setQuery("");
    }
  };

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      onKeyDown={handleKeyDown}
    />
  );
}

Event delegation — React handles this for you

// In React 17+, events are attached to the ROOT container, not each element
// (event delegation), but you write code as if each element has its own handler.
// This is an implementation detail you don't need to manage manually —
// unlike vanilla JS where manual delegation is a common performance technique.

function List({ items }) {
  return (
    <ul onClick={(e) => console.log("Clicked somewhere in the list:", e.target.textContent)}>
      {items.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
  // ONE handler on <ul> catches clicks on any <li> — event bubbling, same as vanilla JS
}

SyntheticEvent internals and pooling history

// SyntheticEvent wraps the native event with a consistent cross-browser API.
// Access the native event if needed:
function handleClick(event) {
  console.log(event.nativeEvent);  // the actual browser Event object
}

// React 16/17 used EVENT POOLING — the SyntheticEvent object was reused/nulled
// after the handler ran, for performance. This meant async access broke:
// function handleClick(e) {
//   setTimeout(() => console.log(e.target), 0);  // ✗ e was nulled by then (React 16/17)
// }
// React 17 removed this restriction for most cases; React 18 removed pooling entirely.
// You can now safely access event properties asynchronously in modern React.

// Stopping propagation:
function handleClick(event) {
  event.stopPropagation();  // prevents the event from bubbling to parent handlers
}

// capture phase handlers (rare, but available):
<div onClickCapture={handleCapture}>...</div>

Official Sources

The Codex links only to official documentation. No third-party tutorials.