Back
Learn › React — Build Modern Web Apps › Composition — the children prop

Composition — the children prop

1 min read

Some components wrap others

Think of a Card with a border and shadow. You want to put anything inside it — text, an image, a form. How does a component receive and display "whatever is inside it"? Through a special prop called children.

The children prop

Whatever you put between a component's opening and closing tags arrives as props.children:

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

// using it:
<Card>
  <h2>Hello</h2>
  <p>This is inside the card.</p>
</Card>

The <h2> and <p> land inside {children}, so the Card wraps them with its styling. One Card component, infinite different contents.

Why is this powerful? (composition)

This is called composition — building flexible components by combining them, instead of cramming options into one giant component. Some real examples:

<Modal>
  <SignupForm />
</Modal>

<Layout>
  <Navbar />
  <HomePage />
  <Footer />
</Layout>

Each wrapper (Card, Modal, Layout) handles structure and style, and children lets you drop in any content.

Mixing children with normal props

You can use both:

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

<Card title="Profile">
  <p>Name: Riya</p>
</Card>

children is the content placed between a component's tags. It lets you build flexible wrappers (Card, Modal, Layout) and compose UIs — instead of building huge one-off components.

Log in to track progress
← Previous
Set up a real React project with Vite
Tip