Children prop
- React course
- Beginner
- Lesson 19/84
- 4 min
Learn that the children prop carries the content inside a component.
Children prop
children is a special prop. When you call a component with a closing tag, the content between becomes children: in <Card><p>Hello</p></Card>, the <p> is Card's children.
Card receives it with function Card({ '{ children }' }) { return <div>{children}</div>; } and places it inside its own wrapper.
This is ideal for wrapper components: Card doesn't know what it contains, it just shows it.
Wrapper pattern
The most common use of the children prop is wrapper components. Components like Card, Modal, Layout take their content from outside.
This pattern lets you define how a component looks, not what it contains. The content is independent; the wrapper is reusable.
Wrappers separate parent and child: the parent shows the child via children; the child manages its own content.
Practice Card with children
Complete the skeleton. Write a component called Card that takes ({ '{ children }' }) as parameter and returns <div className="card">{children}</div>. Don't forget to export.
Starter code
// Write the Card component hereSample solution
function Card({ children }) {
return <div className="card">{children}</div>;
}
export default Card;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When does the children prop arrive?
- When props are given
- When the component is called with a closing tag Correct answer
- When the component is self-closing
- When state changes
Explanation: In a closing-tag call, the content becomes children.
2 children syntax
A wrapper takes ____ as children.A wrapper takes { children } as children.Explanation: { children } is taken with destructuring.
3 Match children usage
| Term | Meaning |
|---|---|
Card |
Wrapper |
children |
Content |
div |
Frame |
export |
Export |