preventDefault: forms and links
onSubmit goes on the <form>, not on the button, so pressing Enter in the input submits too. Remove a preventDefault() line and run again: the preview reports the submit or the link instead.
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
Signing up asha@example.com | default prevented: true
Link click handled in JavaScript