Children prop

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.

Exercise 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.

Show example solution

function Card({ children }) {
  return <div className="card">{children}</div>;
}

export default Card;

Test yourself

When does the children prop arrive?
- When props are given
- When the component is called with a closing tag
- When the component is self-closing
- When state changes
Show answer

When the component is called with a closing tag — In a closing-tag call, the content becomes children.

children syntax

A wrapper takes ____ as children.

Show answer

A wrapper takes { children } as children.

Match children usage

Card

Wrapper
children

Content
div

Frame
export

Export

Next lesson: Default props

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies