Event Handling

React applications are interactive because components respond to user actions — clicks, key presses, form submissions, and more. React uses a synthetic event system that wraps the browser's native events, providing a consistent API across all browsers.

Attaching Event Handlers

In React, event handlers are passed as props using camelCase names. You pass a function reference, not a function call:

function Button() {
  function handleClick() {
    alert("Button clicked!");
  }

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

The difference between onClick={handleClick} (correct — passes the function) and onClick={handleClick()} (wrong — calls it immediately during render) is critical.

Inline Arrow Functions

For simple handlers or when you need to pass arguments, inline arrow functions work well:

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id} onClick={() => console.log(item.name)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

The Event Object

React passes a SyntheticEvent object to every event handler. It has the same interface as the native browser event:

function TextInput() {
  const [value, setValue] = useState("");

  function handleChange(event) {
    setValue(event.target.value);
  }

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

Common properties include event.target (the DOM element), event.target.value (for inputs), event.key (for keyboard events), and event.preventDefault() to stop default browser behaviour.

Preventing Default Behaviour

To prevent a form from submitting the page (the browser default), call event.preventDefault():

function LoginForm() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log("Form submitted");
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Log in</button>
    </form>
  );
}

Common Event Types

React supports all standard DOM events:

• onClick — mouse click
• onChange — input value changed (fires on every keystroke for text inputs)
• onSubmit — form submission
• onKeyDown, onKeyUp — keyboard events
• onFocus, onBlur — focus and blur
• onMouseEnter, onMouseLeave — hover events

Combining Events and State

Event handlers and state work together to create interactivity:

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

Every click toggles isOn, causing React to re-render the button with the updated label. This pattern — event triggers state update, state update triggers re-render — is the core loop of every interactive React application.