When does a default apply?
Missing and undefined both get 48. null and 0 are real values the parent chose, so the default is skipped (D has size 0 and is invisible).
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
A size: 48
B size: 48
C size: null
D size: 0