A Card that wraps anything
One Card frame, three different contents. title is a configuration prop; children is the open slot. The && hides the heading when no title is passed (Topic 3.1).
Whatever you write between a component's opening and closing tags arrives as the children prop, so a component can wrap content it knows nothing about; extra props that hold JSX give it more named slots, and building screens by nesting such pieces (composition) beats piling up configuration props.
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 Box wrapper that renders its children inside a div with a coloured border whose colour comes from a color prop (default "teal").
Write a Split layout with left and right slot props that shows them side by side, and use it with a list on the left and a paragraph on the right.
Explain it without notes
What is the children prop and how is it filled?
How do you build a component with more than one slot?
What does "composition over configuration" mean? Give an example.
How can composition help you avoid prop drilling?
Preview
Console
Nothing logged yet.