The children Prop in React: Composition with Real Examples

The children prop is how React composition works. It holds whatever JSX you place between a component's opening and closing tags, and the component renders it wherever it chooses. A parent supplies the content, and the child supplies the frame.

This single prop powers panels, layouts, modals, and any component that wraps other UI.

What the children prop is

When you nest JSX inside a component's tags, React hands that JSX to the component as a prop named children:

App.jsx

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

Now a parent can wrap any content in a Card. The nested elements arrive as children and render wherever the component places them:

App.jsx

function App() {
  return (
    <Card>
      <h2>Billing</h2>
      <p>Your plan renews on August 20.</p>
    </Card>
  );
}

The browser shows the heading and paragraph inside the card wrapper. Card does not care what its content is. It only supplies the frame.

Children can be text, a single element, or a whole tree of elements, and the child renders all of it in place.

A real example: reusable panels

Imagine three cards that share a layout but hold different content: a profile, a plan, and a warning. Instead of copying the wrapper markup, extract one component:

App.jsx

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

The title is a normal prop, and children holds the flexible middle. For a plain value like title, the passing props guide covers the basics. The parent composes each card:

App.jsx

function Dashboard() {
  return (
    <Panel title="Profile">
      <p>Maya Chen, developer</p>
    </Panel>
  );
}

The panel renders the title in its heading and the paragraph in its body. Render the same Panel again for a plan or a warning, and each copy gets its own title and content, with the content living right where it is written.

Composition beats a wall of props

A common alternative is passing every piece as a prop, which quickly becomes rigid:

App.jsx

function Panel({ title, body, footer }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      <p>{body}</p>
      <div>{footer}</div>
    </section>
  );
}

Every new variation forces a new prop. With children, the parent can pass a paragraph, a button, a list, or nothing, without changing the Panel component at all.

That flexibility is why composition is React's recommended pattern for reuse. A wrapper built on children can grow new use cases without ever touching the wrapper itself.

When not to reach for children

Children works best for one main content area. If a component has several distinct slots, named JSX props can be clearer than a single children block.

Also remember that children is just a prop. It is read-only, and a component should render it rather than inspect or modify it in complex ways.

Keep wrapper components simple and let the parent own the content. If you find yourself inspecting the type of children to behave differently, split the component into separate, more focused components instead.

What to learn next

See how to pass JSX as a named prop for multi-slot components, then practice wrapping your own content in reusable panels and cards.