Named handlers, inline handlers and handler props
Nothing is logged while React renders: handlers run only when a click happens. The code at the bottom clicks all three buttons once; click them yourself too.
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
Playing Lagaan
App decides: uploading!
Inline handler ran