{"id":"l-rf-3-2","courseId":"react-fundamentals","lang":"en","kind":"lesson","summary":"Attach event handlers correctly, pass arguments to them, read the event object, control bubbling and default behaviour, and pass handlers down to child components as props.","html":"

State changes because something happens: a click, a key press, a form submission. React’s event handling is close to the DOM’s, with a few conventions that keep components readable and a couple of traps that catch everyone once.

\n

Pass a function, don’t call it

\n

You attach a handler by passing a function to a prop like onClick:

\n
JSX
export default function ClearButton({ onClear }) {\n  function handleClick() {\n    onClear();\n  }\n\n  return <button onClick={handleClick}>Clear watched</button>;\n}
\n

The braces hold handleClick, the function itself. React keeps it and calls it when the click happens. Compare:

\n
JSX
// Right: passes the function. React calls it on click.\n<button onClick={handleClick}>Clear watched</button>\n\n// Wrong: calls it immediately, during render.\n<button onClick={handleClick()}>Clear watched</button>
\n

The second version runs handleClick every time the component renders and passes its return value (undefined) as the handler. If the function sets state, you get an infinite loop and React stops it with “Too many re-renders”. When you see that error, look for parentheses inside an onSomething={…}.

\n

Passing arguments

\n

Most handlers in a list need to know which item was clicked. Wrap the call in an arrow function:

\n
JSX
{movies.map((movie) => (\n  <li key={movie.id}>\n    {movie.title}\n    <button onClick={() => onRemove(movie.id)}>Remove</button>\n  </li>\n))}
\n

The arrow function is created during render but only runs on click, and when it does, it calls onRemove with the right id. Creating a small function per item is normal and cheap; don’t contort your code to avoid it.

\n

Handlers as props

\n

Components that own state pass handlers down. Children call them to report what happened. The conventions make this readable:

\n\n
src/App.jsx
export default function App() {\n  const [movies, setMovies] = useState(INITIAL_MOVIES);\n\n  function handleRemove(id) {\n    setMovies(movies.filter((m) => m.id !== id));\n  }\n\n  return <MovieList movies={movies} onRemove={handleRemove} />;\n}
\n

MovieList has no idea how removal works. It only knows that when the user clicks Remove, it calls onRemove(id). The state, and the rules for changing it, stay in one place.

\n

The event object

\n

React calls your handler with an event object. It wraps the browser’s native event and has the same familiar API in every browser:

\n
JSX
function handleKeyDown(e) {\n  if (e.key === 'Escape') {\n    setSelectedId(null);\n  }\n}\n\n<main onKeyDown={handleKeyDown}>…</main>
\n

The properties you’ll use most are e.target (the element the event started on), e.currentTarget (the element whose handler is running), e.key for keyboard events, and two methods: e.preventDefault() and e.stopPropagation().

\n

Bubbling and default behaviour

\n

Events bubble: a click on a button inside a card triggers the button’s handler, then the card’s, then any ancestor’s. That’s why the onKeyDown on <main> above catches Escape pressed while any button inside it has focus. Usually bubbling is what you want, but not always:

\n
JSX
<article onClick={() => onOpen(movie.id)}>\n  <h2>{movie.title}</h2>\n  <button\n    onClick={(e) => {\n      e.stopPropagation();\n      onRemove(movie.id);\n    }}\n  >\n    Remove\n  </button>\n</article>
\n

Without stopPropagation, clicking Remove would also open the movie’s details. (A whole-card click target is a mouse convenience; keep a real button or link for opening the details too, so keyboard users can reach it.) Keep this pattern for the cases that need it; reaching for it everywhere makes event flow hard to follow.

\n

preventDefault is different: it stops the browser’s built-in behaviour, such as a link navigating or a form reloading the page. It doesn’t stop bubbling. You’ll use it on the Watchlist’s form in the next lesson.

\n\n

Handlers are where side effects belong

\n

Components must be pure while rendering, but event handlers don’t run during rendering. They run because the user did something, so they’re the right place for side effects: setting state, writing to localStorage, sending a request, logging analytics. When you’re unsure where some code should live, ask “what caused it?” If the answer is a specific user action, it goes in that action’s handler.

\n\n

Next, you’ll handle the most important event in the Watchlist, the form submission that adds a movie, and learn how controlled inputs keep form fields and state in sync.

\n","toc":[{"id":"sec-1","text":"Pass a function, don’t call it","level":2},{"id":"sec-2","text":"Passing arguments","level":2},{"id":"sec-3","text":"Handlers as props","level":2},{"id":"sec-4","text":"The event object","level":2},{"id":"sec-5","text":"Bubbling and default behaviour","level":2},{"id":"sec-6","text":"Handlers are where side effects belong","level":2}],"takeaways":["Pass a function to onClick, as in onClick={handleClick}; writing handleClick() calls it during render.","To pass an argument, wrap the call in an arrow function, as in onClick={() => onRemove(movie.id)}.","Handlers receive an event object with target, key, preventDefault() and stopPropagation().","Name handlers handleX inside a component and callback props onX, so the data flow reads clearly.","Use real <button> elements for clickable things so keyboard and screen reader users can use them too."],"further":[{"title":"Responding to Events","url":"https://react.dev/learn/responding-to-events"},{"title":"Common components (React event object)","url":"https://react.dev/reference/react-dom/components/common#react-event-object"},{"title":"Event bubbling (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling"}],"quiz":[{"q":"

<button onClick={setSelectedId(movie.id)}>Select</button> crashes the app with “Too many re-renders”. Why?

","options":[{"text":"The setter is called while rendering, which triggers another render, which calls it again, forever.","why":"Correct. The braces contain a call, so it runs during render. Write onClick={() => setSelectedId(movie.id)} to pass a function instead."},{"text":"onClick only accepts functions declared with the function keyword.","why":"Any function works, including arrow functions. The problem is that this isn’t a function at all; it’s the result of a call."},{"text":"Buttons can’t change state; only forms can.","why":"Any event handler can set state. A button click is the most common way to do it."}],"answer":0},{"q":"

MovieItem receives onRemove from its parent. The parent’s removeMovie(id) expects a movie id. Which is correct inside MovieItem?

","options":[{"text":"<button onClick={onRemove}>Remove</button>","why":"React calls onRemove with the click event, so the parent receives an event object instead of an id."},{"text":"<button onClick={onRemove(movie.id)}>Remove</button>","why":"That calls onRemove during render and removes the movie immediately, before anyone clicks."},{"text":"<button onClick={() => onRemove(movie.id)}>Remove</button>","why":"Correct. The arrow function runs on click and calls onRemove with exactly the argument the parent expects."},{"text":"<button onRemove={movie.id}>Remove</button>","why":"DOM elements don’t know about onRemove. Only real events like onClick are wired up."}],"answer":2},{"q":"

A movie card has onClick={openDetails}, and inside it a Remove button with onClick={() => onRemove(movie.id)}. Clicking Remove also opens the details. What’s the fix?

","options":[{"text":"Call e.preventDefault() in the Remove handler.","why":"preventDefault stops the browser’s default action, such as a form submitting. It doesn’t stop the click bubbling up to the card."},{"text":"Call e.stopPropagation() in the Remove handler before calling onRemove.","why":"Correct. The click bubbles from the button to the card. stopPropagation stops it at the button."},{"text":"Move the Remove button outside of the component.","why":"That works visually only if the layout allows it, and it avoids the problem instead of understanding it."},{"text":"Use onMouseDown on the Remove button instead.","why":"The card’s click handler still fires on click, and mouse-only events break keyboard use."}],"answer":1},{"q":"

Why should a clickable movie title be a <button> instead of a <div onClick={…}>?

","options":[{"text":"A div’s onClick only works in React 18 and earlier.","why":"onClick works on any element in every React version. The issue is what the element offers users."},{"text":"Buttons render faster than divs.","why":"Rendering speed is the same. The difference is built-in behaviour and accessibility."},{"text":"React warns about click handlers on divs and refuses to run them.","why":"React doesn’t refuse; the click works with a mouse. Keyboard and assistive technology users are the ones left out."},{"text":"A button is focusable, works with Enter and Space, and is announced as a button by screen readers; a div does none of that.","why":"Correct. You’d have to add a role, a tabIndex and key handlers to a div to get what a button gives you for free."}],"answer":3}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 'a1', title: 'Arrival' },\n { id: 'p2', title: 'Past Lives' },\n { id: 'd3', title: 'Dune: Part Two' },\n];\n\nfunction MovieItem({ movie, onSelect, onRemove }) {\n return (\n
  • \n \n \n
    • \n );\n}\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n const [selectedId, setSelectedId] = useState(null);\n const selected = movies.find((m) => m.id === selectedId);\n\n function handleRemove(id) {\n setMovies(movies.filter((m) => m.id !== id));\n }\n\n // Clear the selection when Escape is pressed anywhere inside
    \n\n return (\n
    \n

    Selected: {selected ? selected.title : 'none'}

    \n \n
    \n );\n}\n"},"solution":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 'a1', title: 'Arrival' },\n { id: 'p2', title: 'Past Lives' },\n { id: 'd3', title: 'Dune: Part Two' },\n];\n\nfunction MovieItem({ movie, onSelect, onRemove }) {\n return (\n
  • \n \n \n
    • \n );\n}\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n const [selectedId, setSelectedId] = useState(null);\n const selected = movies.find((m) => m.id === selectedId);\n\n function handleRemove(id) {\n setMovies(movies.filter((m) => m.id !== id));\n }\n\n function handleKeyDown(e) {\n if (e.key === 'Escape') {\n setSelectedId(null);\n }\n }\n\n return (\n
    \n

    Selected: {selected ? selected.title : 'none'}

    \n \n
    \n );\n}\n"},"checks":[{"id":"select","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Past Lives').querySelector('.title')); return text('#selected') === 'Selected: Past Lives';"},{"id":"remove","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Arrival').querySelector('.remove')); return $$('li').length === 2 && !row('Arrival') && text('#selected') === 'Selected: Past Lives';"},{"id":"remove-selected","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Past Lives').querySelector('.remove')); return $$('li').length === 1 && text('#selected') === 'Selected: none';"},{"id":"escape","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Dune: Part Two').querySelector('.title')); if (text('#selected') !== 'Selected: Dune: Part Two') return false; await press(row('Dune: Part Two').querySelector('.title'), 'Escape'); return text('#selected') === 'Selected: none';"}],"title":"Select, remove and Escape","prompt":"

    Clicking a movie’s title selects it. Two things are missing:

    \n
      \n
    1. Remove doesn’t remove anything. App’s handleRemove(id) expects a movie id; fix how MovieItem calls onRemove.
      2. \n
    2. Pressing Escape while focus is anywhere inside <main> should clear the selection, so #selected reads Selected: none.
      3. \n
    \n

    When the selected movie is removed, the selection should also show none. (Look at how selected is calculated before adding any code for this.)

    \n","hints":["Right now onClick={onRemove} means React calls onRemove(event). Wrap it in an arrow function to pass movie.id.","Keyboard events bubble. One onKeyDown handler on <main> sees Escape pressed on any button inside it.","In the handler, check e.key === 'Escape' and call setSelectedId(null)."],"explanation":"

    onClick={onRemove} hands React a function that it calls with the click event, so handleRemove received an event instead of an id and filtered nothing out. () => onRemove(movie.id) passes exactly the argument the parent expects. Escape works from one handler on <main> because keydown events bubble up from the focused button. Removing the selected movie needs no extra code: selected is derived with find, so once the movie is gone it’s undefined and the text falls back to “none”.

    \n","checkLabels":{"select":"Clicking “Past Lives” selects it","remove":"Remove deletes Arrival and keeps the selection","remove-selected":"Removing the selected movie resets the selection to none","escape":"Escape clears the selection"}},"words":676,"readMinutes":3}