What children can be
Empty tags give undefined; one piece of text a string; one element an object; several pieces (even text plus an expression, as in E) an array. {children} renders all of them, so you rarely need to check.
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.Expected console output
A: nothing
B: string
C: object
D: an array of 2
E: an array of 2
F: number