5 hands-on exercises and 5 find-the-bug challenges for the Children and Composition lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Make a Card that renders whatever is placed inside it.
Render a title prop above the children.
Place two elements inside one Card.
Take header and body as separate element props.
Nest a Content component inside a Layout that renders children.
The component ignores what was placed inside it.
Content between the tags arrives as children, not as a named prop.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceA self-closed component has no children to render.
A slot expecting an element was given a quoted string of markup.
The wrapper renders its own text instead of the component inside it.