Bubbling, capture and stopPropagation
Play: capture (top-down) runs first, then the button, then the bubble up to the toolbar. Stop: capture still runs (it happens before the button), but stopPropagation blocks the bubble. Click the orange area itself: only the toolbar logs.
You make a component react to the user by passing a function to an event prop such as onClick; React calls that function with an event object when the event happens, and the event bubbles up through parent handlers unless you stop it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a ColorSwitch component that takes an onChangeColor prop. Its button must change the page colour (through the parent) but must not trigger the parent div's own onClick that counts clicks.
Write a form with one input name that logs Hello, <name>! on submit without reloading the page.
Explain it without notes
What is the difference between onClick={handleClick} and onClick={handleClick()}?
What are the naming conventions for handlers and handler props, and why do they help?
Explain event propagation in React and how stopPropagation and preventDefault differ.
What is e.target versus e.currentTarget?
Preview
Console
Nothing logged yet.Expected console output
capture: the toolbar sees it first
Play: click target BUTTON currentTarget BUTTON
bubble: the toolbar got a click from Play
capture: the toolbar sees it first
Stop: handled here only