5 hands-on exercises and 5 find-the-bug challenges for the Spreading and Forwarding Props lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Pass every field of an object as a separate prop.
Take one prop by name and pass the rest to the element.
Spread the defaults, then override one prop.
Let a caller add a class while keeping the component's own.
Pass an onClick through to the underlying button.
Passing the object as one prop is not the same as spreading it.
The spread comes last, so it overwrites the explicit prop.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe extra props are collected but never reach the element.
Forwarding a class should keep the component's own class too.
The wrapper defines its own onClick, so the forwarded one never runs.