How do you handle events in React?

beginner

Re-explain

Pass a function as a camelCase prop on the element, like onClick={handleClick}. React calls it with an event object when the event fires, such as a click or a key press.

function Button() {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Button clicked!');
    console.log('Event type:', event.type);
  };
  
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Pass the function itself, not a call. onClick={handleClick()} would run the handler during rendering instead of on click.

The event object is a SyntheticEvent, React's wrapper around the native browser event. It behaves the same across browsers and has the usual methods and properties, such as preventDefault() and type.

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

Guided practice for React One question at a time. Answer out loud, get graded, see what you missed.

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens How interviewers actually use this question

Likely follow-ups

How would you pass an item's id to a click handler inside a list? Wrap it in an arrow function, onClick={() => onDelete(item.id)}, and say why onClick={onDelete(item.id)} breaks.
What's the difference between event.preventDefault() and event.stopPropagation()? One cancels the browser's default action, the other stops the event bubbling to parent handlers. Give a case for each, like a form submit and a nested click.
Does React attach a listener to every element that has an onClick? How does it wire events up? Event delegation. Since React 17 it listens once at the root container, not the document, and dispatches to the right handler.
What is a SyntheticEvent, and how do you get to the underlying native event? A cross-browser wrapper with the same methods as the native event. event.nativeEvent gives you the original browser event when you need it.
Does an inline arrow function as a handler cause performance problems? When would you use useCallback? It makes a new function on every render. That only matters when a memoized child receives it as a prop, which is where useCallback helps.

What you can say

In React you handle an event by passing a function as a camelCase prop on the element, like onClick={handleClick}.
When the click or key press happens, React calls that function and passes it an event object.
Inside the handler I use that object much like a native event, so I can call preventDefault() or read event.type.
The object is a SyntheticEvent, which is React's wrapper around the browser event, so it behaves the same in every browser.
The classic mistake is writing onClick={handleClick()}, because that runs the handler during rendering instead of waiting for the click.

Weak answers to avoid

Writes onClick={handleClick()} That calls the handler during render, not on click. Pass the function reference, or wrap it in an arrow function when you need arguments.
Uses lowercase onclick or a string handler That's an HTML habit. React props are camelCase and take a function, so write onClick={handleClick}, not a lowercase attribute or a string.
Treats the event as the raw DOM event React passes a SyntheticEvent wrapper. Say so, say it behaves the same across browsers, and mention event.nativeEvent for the underlying browser event.
Returns false to cancel the default action That works in inline HTML handlers but does nothing in React. Call event.preventDefault() explicitly.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the React cheatsheet.

← Back to all React questions

Pro · $10/mo

88 of 103 React answers are in Pro.

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.

Full answers + code
AI explanations, simpler or deeper
1,000 AI credits / month
Cancel anytime

Get Pro → See plans & pricing →