Two bugs a careless spread lets in
React warns about isActive on a DOM element, and the final HTML has class="highlight": the card class (and its border) was silently overwritten. Fix both by pulling isActive and className out of the props and merging the class yourself.
Default parameter values give a prop a fallback when the parent leaves it out, ...rest collects every prop you didn't name, and spreading {...rest} onto an element forwards them all at once: handy for wrapper components, but it can quietly pass bad attributes or overwrite your own.
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.
Write a Heading component with a level prop that defaults to 2 and renders <h2>, <h3> and so on. (Hint: a variable like const Tag = "h" + level; can be used as <Tag>.)
Write a TextInput wrapper that takes a label prop, renders a <label> around the text and an <input>, and forwards every other prop to the input.
Explain it without notes
How do you give a prop a default value in a function component, and when is it used?
What do ...rest and {...rest} do in a wrapper component?
Why does the position of {...rest} among other attributes matter?
Describe two ways spreading props can hide bugs, and how to avoid them.
Preview
Console
Nothing logged yet.Expected console output
React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
<div class="highlight" id="plan"><h3>Plan</h3></div>