Lesson 8 of 30
27%
Children
children is a special prop. It is whatever you put between the opening and closing tags.
That is how Card, Layout, and Button wrap other UI.
A wrapping component
javascript
Card does not need to know about Ada. It only provides the frame.
children can be text
javascript
children can be more components
javascript
Optional children
If the parent writes a self-closing tag, children is undefined.
javascript
Why this is powerful
Layout components accept children. Pages stay free of copy-pasted wrappers.
This is composition. You will use it more than inheritance.
Tip: If you are passing a label as a string prop and also as children, pick one. children is usually nicer for longer content.
Test yourself
Three quick questions made just for this lesson. Earn 10 XP per correct answer.