Children
- React Native course
- Beginner
- Lesson 15/116
- 5 min
Learn child components with the children prop.
The children prop
children is a special prop in React. It represents the content written between a component's opening and closing tags. This makes it easy to build wrapper components.
For example: function Card({ children }) { return <View>{children}</View>; }. Here Card wraps whatever content it receives inside a View.
Usage: <Card><Text>Hello</Text></Card>. Here <Text>Hello</Text> is passed as children to Card.
Wrapper component
The children prop is the foundation of wrapper components. A wrapper organizes, styles, or wraps the content it receives inside other components.
For example, a Card component can be used to display content inside a box. It can hold text, images, or other components.
This way, a single Card definition shows endless different content; this is the power of the component approach.
Practice Write a Card component
Write a Card component that takes the children prop via destructuring and returns <View>{children}</View>.
Starter code
// Write Card with children
function Card() {
return null;
}Sample solution
function Card({ children }) {
return (
<View>
{children}
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 children destructuring
function Card(____) { return <View>{children}</View>; }function Card({ children }) { return <View>{children}</View>; }Explanation: children is destructured with curly braces.
2 Match the children concepts
| Term | Meaning |
|---|---|
children |
Special prop |
<Card>...</Card> |
Content |
{children} |
Embedding |
<View> |
Wrapper |
3 How do you pass children to Card?
- <Card children='Hello' />
- <Card>Hello</Card> Correct answer
- <Card name='Hello' />
- <Card>{'Hello'}</Card>
Explanation: Content written between tags becomes children.