The `children` Prop

Whenever you write JSX between a component’s opening and closing tags, that JSX is passed as the children prop.

The Idea

<Card>
  <h2>Title</h2>
  <p>Body</p>
</Card>

Inside Card, children is [<h2>Title</h2>, <p>Body</p>].

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

This is how you build reusable layout containers.

What Children Can Be

Anything React can render — and you can pass several:

<Box>
  Some text
  <span>some JSX</span>
  {42}                    {/* numbers */}
  {[1, 2, 3].map(n => <p key={n}>{n}</p>)}  {/* arrays */}
  {showWarning && <Warning />}
</Box>

A single child arrives as that one thing; multiple children arrive as an array. You usually don’t care — just render {children}.

Common Patterns

Wrapper with extra styling

function Panel({ children }) {
  return (
    <section className="panel">
      {children}
    </section>
  );
}

<Panel>
  <h1>Title</h1>
  <p>Body</p>
</Panel>

Composing slots

function Layout({ header, sidebar, children }) {
  return (
    <div className="layout">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

<Layout
  header={<Nav />}
  sidebar={<UserMenu />}
>
  <Article />
</Layout>

The header and sidebar props let the caller fill specific “slots”. The remaining tree becomes children.

Children Are Just a Prop

You can destructure them, default them, validate them — same as any other prop.

function Banner({ children = "Welcome!" }) {
  return <div className="banner">{children}</div>;
}

<Banner />                     // "Welcome!"
<Banner>Hello, Ada</Banner>     // "Hello, Ada"

Children Functions (Render Props)

You can pass a function as children — useful when the parent needs to give the child some computed value:

<Counter>
  {count => <p>Count is {count}</p>}
</Counter>

You’ll see this pattern called “render props”. It’s less common now that hooks exist; we’ll cover it briefly in the Patterns chapter.

Up Next

Spread the rest of an unknown props bag onto a child element.