Free Computer Courses

Handling Events

Updated September 2026 · Beginner-friendly guide

View saved

Attach a handler

Pass a function to an event prop. React calls it when the event fires.

function SaveButton() {
  function handleClick() {
    console.log("Saved");
  }
  return (
    <button type="button" onClick={handleClick}>
      Save
    </button>
  );
}

Read the event object

Handlers receive a synthetic event. For inputs, read event.target.value.

function NameField() {
  const [name, setName] = useState("");
  return (
    <input
      value={name}
      onChange={(event) => setName(event.target.value)}
      placeholder="Your name"
    />
  );
}

Prevent default browser behavior

Use event.preventDefault() on form submit so the page does not reload.

function handleSubmit(event) {
  event.preventDefault();
  console.log("Submitted");
}

Pass data into handlers

Use an arrow function when you need extra arguments.

<button type="button" onClick={() => removeItem(id)}>Remove</button>

Related tutorials

Comments

One comment per signed-in account. Comments are saved with this page’s URL.