5 hands-on exercises and 5 find-the-bug challenges for the Component Patterns lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Keep the data in the parent and the markup in a plain child.
Let the caller decide how each item is drawn.
Build a Card with its own Header piece.
One component holds the state, another only displays it.
Pass a component as a prop and render it.
The prop is a function, so it must be invoked.
A component held in a variable must be capitalised to render as a tag.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe Card drops its children, so the header disappears.
The presentational component should read the prop, not keep state.
The view reads a prop the parent never sends.