Responding to events

A button that answers a click

So far, your components have described what the screen shows. Now they start to answer the person using it. When someone clicks, types, or sends a form, the browser fires an event. In plain JavaScript you'd find the element and call addEventListener. In React you give the element a function, as a prop, in your JSX:

1export default function AddToCart() {2  function handleClick() {3    console.log("Added Masala chai to the cart");4  }5 6  return <button onClick={handleClick}>Add to cart</button>;7}

Lines 2 to 4 define handleClick, a function inside the component. Line 6 hands it to the button as onClick. React keeps it, and calls it each time the button is clicked. A function like this, which runs when an event happens, is an event handler. Click Add to cart in the result: the console under it says Added Masala chai to the cart, once per click.

The prop's name says which event: onClick for clicks, onChange for typing, onSubmit for forms. They're written in camelCase, like the other JSX attributes in Writing markup with JSX. The examples print to the console instead of changing the screen, because changing the screen needs state, the next lesson's topic. A handler is where that change will happen.

Pass the function, don't call it

The braces in onClick={handleClick} hold a JavaScript value, and that value must be a function. Add two brackets, and it isn't one any more. Here is the overview's button with that one change, a bug on purpose:

1export default function AddToCart() {2  function handleClick() {3    console.log("Added Masala chai to the cart");4  }5 6  return <button onClick={handleClick()}>Add to cart</button>;7}

Line 6 now says handleClick(). JavaScript inside braces runs right away, so handleClick runs while React renders the button, and onClick gets what it returns: undefined. Look at the console: the message is already there before any click, with a 2 beside it because it ran twice. (Twice because the preview renders in StrictMode, which calls each component two times in development, as Keeping components pure showed.) Click the button: nothing more is printed. Press Edit & run and delete the (): the console starts empty, and each click adds a line.

When the handler needs something passed in, wrap the call in an arrow function instead. The arrow function is what onClick gets, and it makes the call later, on the click:

1function addToCart(tea, cups) {2  console.log(`Added ${cups} x ${tea}`);3}4 5function TeaButton({ tea }) {6  function handleClick() {7    addToCart(tea, 1);8  }9 10  return (11    <p>12      <button onClick={handleClick}>Add {tea}</button>13      <button onClick={() => addToCart(tea, 2)}>Add 2</button>14    </p>15  );16}17 18export default function Menu() {19  return (20    <>21      <TeaButton tea="Masala chai" />22      <TeaButton tea="Matcha" />23    </>24  );25}

1. Lines 1 to 3 are an ordinary function, addToCart, that takes a tea and a number of cups.
2. Lines 6 to 8 define handleClick inside TeaButton. Because it's inside, it can read the tea prop: each TeaButton gets its own handleClick, with its own tea. That's a closure.
3. Line 12 passes handleClick by name. Line 13 writes the handler inline, as an arrow function: () => addToCart(tea, 2). Both are functions, so both wait for a click.
4. Lines 21 and 22 use the component twice, so there are four buttons.

Click Add Matcha: the console says Added 1 x Matcha. Click the Add 2 next to it: Added 2 x Matcha. Writing onClick={addToCart(tea, 2)} without the arrow would run while rendering, like the bug above. A named handler and an inline arrow work the same; inline is handy for one short call.

Passing handlers down as props

A handler is a function, and a function can be a prop, as Passing props to a component showed. That lets one component decide what happens, and another decide how it looks. Here, Button draws every button in a profile toolbar the same way, and each parent gives it a different job:

1function Button({ onClick, children }) {2  return (3    <button className="button" onClick={onClick}>4      {children}5    </button>6  );7}8 9function SaveButton() {10  function handleSaveClick() {11    console.log("Saved your profile");12  }13 14  return <Button onClick={handleSaveClick}>Save</Button>;15}16 17function ResetButton() {18  return <Button onClick={() => console.log("Put back your old details")}>Reset</Button>;19}20 21export default function ProfileToolbar() {22  return (23    <div className="toolbar">24      <SaveButton />25      <ResetButton />26    </div>27  );28}

Button (lines 1 to 7) takes an onClick prop and passes it to the real <button> on line 3. SaveButton passes its own handleSaveClick on line 14, and ResetButton passes an inline arrow function on line 18. Click Save, then Reset: each prints its own line. Design systems work this way: their buttons bring the look, and your code brings the behavior.

Naming: on for props, handle for functions

Built-in elements like <button> only take React's event names, spelled exactly: onClick, onChange. Your own components can take any prop names. By habit, a prop that takes a handler starts with on and a capital letter, and the function you pass starts with handle. Name props after what happens in your app, not after the mouse:

1function ProductCard({ name, price, onShowDetails, onAddToCart }) {2  return (3    <article className="card">4      <h3>{name}</h3>5      <p>${price}</p>6      <button onClick={onShowDetails}>Details</button>7      <button onClick={() => onAddToCart(name)}>Add to cart</button>8    </article>9  );10}11 12export default function Shop() {13  function handleAddToCart(name) {14    console.log(`${name} added to the cart`);15  }16 17  return (18    <div className="shelf">19      <ProductCard20        name="Matcha"21        price={6}22        onShowDetails={() => console.log("Showing Matcha's details")}23        onAddToCart={handleAddToCart}24      />25      <ProductCard26        name="Sencha"27        price={4}28        onShowDetails={() => console.log("Showing Sencha's details")}29        onAddToCart={handleAddToCart}30      />31    </div>32  );33}

ProductCard takes onShowDetails and onAddToCart on line 1. Line 6 passes onShowDetails straight to the Details button. Line 7 wraps onAddToCart in an arrow function, so it can pass the card's name. Shop defines handleAddToCart once, on lines 13 to 15, and gives it to both cards on lines 23 and 29. Click Add to cart on Sencha: Sencha added to the cart. Shop doesn't know a button was involved; later, the same prop could be called from a keyboard shortcut.

How to read the table: each row is a name you might write, what it is, and whether React runs it on its own.

One more habit from React's documentation: put click handlers on elements made for clicking, like <button>. A <div onClick> works with a mouse, but it can't be reached with the Tab key or pressed with Enter, so people who use a keyboard can't use it.

The event object React passes in

React calls your handler with one argument: an event object describing what happened. By habit it's called e. It has the properties you know from the browser's events, like type and target:

1export default function SearchBox() {2  function handleClick(e) {3    console.log(e.type, "on", e.target.tagName, "handled by", e.currentTarget.tagName);4  }5 6  function handleChange(e) {7    console.log("Search for:", e.target.value);8  }9 10  return (11    <div onClick={handleClick}>12      <input placeholder="Search teas" onChange={handleChange} />13      <button>Search</button>14    </div>15  );16}

Line 11 puts handleClick on the <div>, not on the button. Click Search: the console says click on BUTTON handled by DIV. e.target is the element that was clicked, and e.currentTarget is the element whose handler is running. They differ because the click travelled from the button to the <div>, which the next section explains. Now type chai in the box: line 7 prints Search for: c, then ch, then cha, then chai. In React, onChange runs on every change to an input's value, on each key, unlike the browser's own change event, which waits until you leave the box. (Clicking into the box prints a click line too: the box is inside the <div>.)

e isn't the browser's event itself. React gives you its own event object, sometimes called a synthetic event. It follows the same standard as the browser's, with the same properties and methods, and fixes a few differences between browsers. The browser's original is inside it, as e.nativeEvent:

1export default function Inspect() {2  function handleClick(e) {3    console.log("React's event:", e.type);4    console.log("The browser's event inside it:", e.nativeEvent.type);5    console.log("The same object?", e === e.nativeEvent);6  }7 8  return <button onClick={handleClick}>Inspect this click</button>;9}

Click the button. Lines 3 and 4 both say click, and line 5 says The same object? false: two objects, one inside the other. You'll rarely need nativeEvent. One more thing React does for you: it doesn't add a listener to each element. When your app starts, it adds its own listeners, for every kind of event, to the root element your app is rendered into. When an event reaches the root, React works out which of your handlers to call. That's why the next section can talk about a click travelling through your components. A later lesson, React's event system, opens it up.

How to read the table: each row is an event prop you'll use often, what it reports, and whether it goes up to the elements around it.

A click bubbles up the tree

A click on a button is also a click on everything around it. So after the button's onClick, React runs the onClick of each element around it, from the inside out. That's called bubbling, or propagation, the same idea as in the browser's bubbling and capturing. On a product card it causes a bug:

1export default function ProductCard() {2  return (3    <article className="card" onClick={() => console.log("card: open Matcha's page")}>4      <h3>Matcha</h3>5      <button onClick={() => console.log("button: add Matcha to the cart")}>6        Add to cart7      </button>8    </article>9  );10}

Line 3 makes the whole card open the product's page. Line 5 gives the button its own job, adding to the cart. Click Add to cart. The console shows two lines: button: add Matcha to the cart, then card: open Matcha's page. The click bubbled from the button up to the card. Click the word Matcha instead: only the card's line, because nothing inside the card was clicked.

To stop it, call e.stopPropagation() in the button's handler. It tells React not to run the handlers above:

1export default function ProductCard() {2  return (3    <article className="card" onClick={() => console.log("card: open Matcha's page")}>4      <h3>Matcha</h3>5      <button6        onClick={(e) => {7          e.stopPropagation();8          console.log("button: add Matcha to the cart");9        }}10      >11        Add to cart12      </button>13    </article>14  );15}

Line 6 now takes the event, e, and line 7 stops it before line 8 prints. Click Add to cart: one line, from the button. The card's handler never runs. The heading still opens the card.

Bubbling is the second half of the trip. Before it, the event travels down from the outside to what you clicked, and React runs any capture handlers on the way: the same name with Capture at the end, like onClickCapture.

Try it, with real React handlers on this page:

export default function ShopPage() {
  return (
    <section
      onClickCapture={() => console.log("section onClickCapture")}
      onClick={() => console.log("section onClick")}
    >
      Shop page
      <article
        onClickCapture={() => console.log("article onClickCapture")}
        onClick={() => console.log("article onClick")}
      >
        Matcha card
        <button
          onClickCapture={() => console.log("button onClickCapture")}
          onClick={() => console.log("button onClick")}
        >
          Add to cart
        </button>
      </article>
    </section>
  );
}

With capture on, a click on Add to cart runs six handlers: section onClickCapture, article onClickCapture, button onClickCapture on the way down, then button onClick, article onClick, section onClick on the way up. Click the card itself, and only four run: the button isn't on the path. Switch on stopPropagation() in the button and click the button again: four, because the capture handlers had already run when the button stopped the click.

That last point is what capture handlers are for. A stopped click is still seen by every capture handler above it, so they suit code that must see every click, like analytics:

1export default function Shop() {2  function handleAnyClick(e) {3    console.log("analytics:", e.target.tagName, "clicked");4  }5 6  return (7    <main onClickCapture={handleAnyClick}>8      <article className="card" onClick={() => console.log("card: open Matcha's page")}>9        <h3>Matcha</h3>10        <button11          onClick={(e) => {12            e.stopPropagation();13            console.log("button: add Matcha to the cart");14          }}15        >16          Add to cart17        </button>18      </article>19    </main>20  );21}

Line 7 puts handleAnyClick on <main> as onClickCapture. Click Add to cart: the console says analytics: BUTTON clicked first, then the button's line. The button's stopPropagation on line 12 still keeps the card from opening, but it can't take back a capture handler that ran before it. You'll rarely write capture handlers in app code; routers and analytics tools use them.

Bubbling is automatic, which makes it easy to forget. If it gets hard to tell which handlers run, there's a plainer way: the child handles its own click and then calls the prop from its parent, as the inbox below does. Every step is then in the code you read.

preventDefault: stop the browser's own action

Some events come with something the browser does by itself, its default action. A link loads its address. A form's submit event sends the form and loads a new page. In a React app, that new page throws away your app. e.preventDefault() cancels the default action:

1export default function NewsletterForm() {2  function handleSubmit(e) {3    e.preventDefault();4    const data = new FormData(e.currentTarget);5    console.log("Subscribing", data.get("email"));6  }7 8  return (9    <form onSubmit={handleSubmit}>10      <input name="email" aria-label="Email" defaultValue="asha@example.com" />11      <button>Subscribe</button>12    </form>13  );14}

Line 9 handles onSubmit on the form, not onClick on the button, so pressing Enter in the box submits too. Line 3 cancels the browser's own submit. Line 4 reads every named field with FormData, and line 5 prints the email. Press Subscribe: the console says Subscribing asha@example.com. Now press Edit & run, delete line 3, and press Subscribe again. Your line still prints, followed by a note from the preview: it caught the submit itself. On a real page nothing would catch it, and the browser would send the form and load a new page, throwing your app away.

The same works for a link that should do something else instead of loading its address:

1export default function MiniCart() {2  function handleClick(e) {3    e.preventDefault();4    console.log("Opening the cart drawer instead of the cart page");5  }6 7  return (8    <a href="/cart" onClick={handleClick}>9      View cart10    </a>11  );12}

Line 3 keeps the browser from going to /cart, so line 4 can open a drawer instead. Click View cart: the page stays, and the console prints the line. Delete line 3 with Edit & run and click again: now the link tries to load /cart, and the preview says it has no such page.

Don't mix up the two. e.stopPropagation() stops the handlers above, in your components, from running. e.preventDefault() stops the browser's own action. A form that reloads needs preventDefault; a card that opens when you meant the button needs stopPropagation.

React 19 adds another way for forms: pass a function as the form's action, like <form action={subscribe}>, and React handles the submit for you, without a reload. The Form actions lesson teaches them. onSubmit with preventDefault keeps working, and you'll see it in most code written before React 19.

An inbox with three kinds of click

Here everything comes together in one small app: rows that open, a button inside each row that shouldn't, and a form that mustn't reload.

1const messages = [2  { id: 1, from: "Asha", subject: "Your order has shipped" },3  { id: 2, from: "Ravi", subject: "Matcha is back in stock" },4];5 6function MessageRow({ message, onOpen, onArchive }) {7  function handleArchiveClick(e) {8    e.stopPropagation();9    onArchive(message.id);10  }11 12  return (13    <li className="row" onClick={() => onOpen(message.id)}>14      <strong>{message.from}</strong>15      <span>{message.subject}</span>16      <button onClick={handleArchiveClick}>Archive</button>17    </li>18  );19}20 21function ReplyForm({ onSend }) {22  function handleSubmit(e) {23    e.preventDefault();24    onSend(new FormData(e.currentTarget).get("reply"));25  }26 27  return (28    <form onSubmit={handleSubmit}>29      <input name="reply" aria-label="Reply" defaultValue="Thanks!" />30      <button>Send</button>31    </form>32  );33}34 35export default function Inbox() {36  return (37    <>38      <ul className="inbox">39        {messages.map((message) => (40          <MessageRow41            key={message.id}42            message={message}43            onOpen={(id) => console.log("Open message", id)}44            onArchive={(id) => console.log("Archive message", id)}45          />46        ))}47      </ul>48      <ReplyForm onSend={(text) => console.log("Send reply:", text)} />49    </>50  );51}

• Rows open on a click: line 13 calls onOpen with the message's id. Click Asha's subject: Open message 1.
• Archive doesn't open the row: handleArchiveClick on lines 7 to 10 stops the click, then calls the parent's onArchive itself. Click Archive on Ravi's row: only Archive message 2.
• The reply form doesn't reload: line 23 cancels the submit, and line 24 hands the text to onSend. Press Send: Send reply: Thanks!.
• Inbox decides what each one does: lines 43, 44, and 48 pass the handlers down. The rows and the form only report what happened.

A real inbox would also let keyboard users open a row, for example by making the subject a button or a link. The row's onClick here keeps the example small.

Sort each problem by the call that fixes it:

Common mix-ups

• "onClick={handleClick()} runs handleClick on a click." No. The brackets call it while React renders. Pass handleClick, or an arrow function.
• "Any component understands onClick." No. Only built-in elements like <button> do. On your own component, onClick is just a prop until the component passes it to an element.
• "stopPropagation stops a form from reloading." No. That's preventDefault. stopPropagation only stops the handlers above.
• "Only the clicked element's onClick runs." No. The click bubbles: every onClick around it runs too, unless one stops it.
• "Returning false from a handler cancels the default." No. React ignores what a handler returns. Call e.preventDefault().
• "e is the browser's event." Not quite. It's React's event object, with the browser's inside, in e.nativeEvent.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run, and its console under the result. For the first one, answer before you run anything.

export default function OrderRow() {
  return (
    <div onClick={() => console.log("row")}>
      Order #12
      <button onClick={() => console.log("button")}>Track</button>
    </div>
  );
}

1export default function OrderRow() {2  return (3    <div onClick={() => console.log("row")}>4      Order #125      <button onClick={() => console.log("button")}>Track</button>6    </div>7  );8}

1export default function LikeButton() {2  function handleLike() {3    console.log("You liked Matcha");4  }5 6  return <button onClick={handleLike()}>Like</button>;7}

1export default function LikeButton() {2  function handleLike() {3    console.log("You liked Matcha");4  }5 6  return <button onClick={handleLike}>Like</button>;7}

1function QuantityStepper({ quantity, onIncrease, onDecrease }) {2  return (3    <p>4      <button>-</button> {quantity} <button>+</button>5    </p>6  );7}8 9export default function CartLine() {10  return (11    <QuantityStepper12      quantity={2}13      onIncrease={() => console.log("Quantity + 1")}14      onDecrease={() => console.log("Quantity - 1")}15    />16  );17}

1function QuantityStepper({ quantity, onIncrease, onDecrease }) {2  return (3    <p>4      <button onClick={onDecrease}>-</button> {quantity} <button onClick={onIncrease}>+</button>5    </p>6  );7}8 9export default function CartLine() {10  return (11    <QuantityStepper12      quantity={2}13      onIncrease={() => console.log("Quantity + 1")}14      onDecrease={() => console.log("Quantity - 1")}15    />16  );17}

1function NoteRow({ note, onOpen, onDelete }) {2  return (3    <li onClick={() => onOpen(note.id)}>4      {note.title} <button onClick={() => onDelete(note.id)}>Delete</button>5    </li>6  );7}8 9export default function Notes() {10  return (11    <ul>12      <NoteRow13        note={{ id: 7, title: "Order more matcha" }}14        onOpen={(id) => console.log("Open note", id)}15        onDelete={(id) => console.log("Delete note", id)}16      />17    </ul>18  );19}

1function NoteRow({ note, onOpen, onDelete }) {2  return (3    <li onClick={() => onOpen(note.id)}>4      {note.title}{" "}5      <button6        onClick={(e) => {7          e.stopPropagation();8          onDelete(note.id);9        }}10      >11        Delete12      </button>13    </li>14  );15}16 17export default function Notes() {18  return (19    <ul>20      <NoteRow21        note={{ id: 7, title: "Order more matcha" }}22        onOpen={(id) => console.log("Open note", id)}23        onDelete={(id) => console.log("Delete note", id)}24      />25    </ul>26  );27}

1export default function TeaSearch() {2  function handleSubmit(e) {3    console.log("Searching for", e.currentTarget.elements.query.value);4  }5 6  return (7    <form onSubmit={handleSubmit}>8      <input name="query" aria-label="Search" defaultValue="chai" />9      <button>Search</button>10    </form>11  );12}

1export default function TeaSearch() {2  function handleSubmit(e) {3    e.preventDefault();4    console.log("Searching for", e.currentTarget.elements.query.value);5  }6 7  return (8    <form onSubmit={handleSubmit}>9      <input name="query" aria-label="Search" defaultValue="chai" />10      <button>Search</button>11    </form>12  );13}

1export default function EditorToolbar() {2  return (3    <div onClick={() => console.log("toolbar clicked")}>4      <button onClick={() => console.log("Bold")}>Bold</button>5      <button6        onClick={(e) => {7          e.stopPropagation();8          console.log("Delete");9        }}10      >11        Delete12      </button>13    </div>14  );15}

1export default function EditorToolbar() {2  return (3    <div onClickCapture={(e) => console.log("clicked:", e.target.textContent)}>4      <button onClick={() => console.log("Bold")}>Bold</button>5      <button6        onClick={(e) => {7          e.stopPropagation();8          console.log("Delete");9        }}10      >11        Delete12      </button>13    </div>14  );15}

Check your understanding

For order questions, trace the click: capture handlers from the outside in, then onClick from the clicked element out. Press Edit & run on a question's code and click to check.

Key takeaways

• An event handler is a function you pass to a built-in element with a prop like onClick. React calls it when the event happens.
• Pass the function, onClick={handleClick}, or an arrow function. handleClick() runs while rendering.
• Handlers can be props. Name the props onSomething, after what happens in your app, and the functions handleSomething.
• React passes an event object, e: its own, with the browser's in e.nativeEvent. e.target is what was clicked; e.currentTarget is where the handler sits.
• Events go down through onClickCapture handlers, then bubble up through onClick handlers. e.stopPropagation() stops the trip up. onScroll doesn't bubble.
• e.preventDefault() stops the browser's own action, like a form loading a new page.

Coming next: State: a component's memory. Your handlers will finally change what's on the screen.