Children

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.

Exercise Write a Card component

Write a Card component that takes the children prop via destructuring and returns <View>{children}</View>.

Show example solution

function Card({ children }) {
  return (
    <View>
      {children}
    </View>
  );
}

Test yourself

children destructuring

function Card(____) { return <View>{children}</View>; }

Show answer

function Card({ children }) { return <View>{children}</View>; }

Match the children concepts

children

Special prop
<Card>...</Card>

Content
{children}

Embedding
<View>

Wrapper
How do you pass children to Card?
- <Card children='Hello' />
- <Card>Hello</Card>
- <Card name='Hello' />
- <Card>{'Hello'}</Card>
Show answer

<Card>Hello</Card> — Content written between tags becomes children.

Next lesson: Multiple props

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies