Event Handling in React: onClick, onChange, and More

Event handling in React is how a component responds when a user clicks a button, types in a field, or moves over an element. You pass a function to a JSX prop such as onClick or onChange, and React calls that function when the interaction happens. The function runs later, not while the component renders, which is why event handlers are the right place for side effects.

Attach a click handler

Start with a button. Attaching a handler takes three steps: declare a function inside the component, put the logic in its body, and pass the function to the matching prop. The function is usually named after the event it handles, like handleClick.

App.jsx

function AlertButton() {
  function handleClick() {
    alert("You clicked the button");
  }
 
  return <button onClick={handleClick}>Click me</button>;
}

Click the button and the browser shows the message. React remembers the handleClick function and calls it only when the click event fires. Because the handler is declared inside the component, it can read the component's props and state when it runs.

Pass the function, do not call it

The difference between passing a handler and calling it is subtle but important. onClick={handleClick} passes the function itself, so React can call it on click. onClick={handleClick()} calls the function during rendering, before any click happens, which usually means the handler fires on every render or never fires at all.

When you need a short inline statement, wrap it in an arrow function so React still receives a function to call later.

App.jsx

<button onClick={() => alert("You clicked the button")}>Click me</button>

The arrow function is created when the component renders, but it does not run until the click. Inline arrows are fine for one or two statements; anything longer deserves a named handler.

Respond to typing with onChange

Typing works the same way, through the onChange prop. When a user edits an input, React fires the handler and passes an event object that holds the current value. Pairing a value prop with an onChange handler makes the field controlled, so the UI always matches state.

App.jsx

import { useState } from "react";
function NameField() {
  const [name, setName] = useState("");
  return (
    <label>
      Your name
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </label>
  );
}

Each keystroke calls setName with the new text, and the input keeps showing what the user typed. A value and onChange pair like this is a controlled input, which the onChange guide explains in detail.

Common event props

React supports the standard browser events as JSX props, written in camelCase. The ones you reach for most often are:

• onClick for clicks and taps.
• onChange for edits to form fields.
• onSubmit for form submission.
• onFocus and onBlur for focus changes.
• onKeyDown for keyboard input.

Handlers can also run side effects. Rendering must stay pure, but an event handler is the correct place to update state, focus an element, or start a network request.

Name handlers after the action

Name handler functions after the event they handle, like handleClick, handleChange, and handleSubmit. When a parent passes a handler down to a child, name the prop after the app-level action instead, such as onDelete or onSelect. The parent then decides what happens without the child knowing which raw browser event triggered it.

Use the right element

Use the right element for each interaction. Clicks belong on a real button, not a div with an onClick handler, because a button works with the keyboard and screen readers for free. Form fields should sit inside a label so clicking the text focuses the input.

Read the event object

React passes one argument to every handler: the event object, usually named e. Its target is the element that fired the event, so you can read the text of an input or the checked state of a checkbox. React wraps the native browser event in its own event object, so you read and use it the same way across browsers.

The same object carries methods that control browser behavior. Calling e.preventDefault() stops a form from reloading the page, which the prevent default guide walks through. Calling e.stopPropagation() keeps the event from bubbling to parent elements.

What to learn next

Handlers usually need extra data, like which item in a list was clicked. Passing arguments to event handlers shows how to send that data along without calling the function early.