The children prop

The children prop

So far our components were self-closing: <TaskItem />. But HTML tags wrap content, <div>content</div>, and components can too. Whatever you put between a component's opening and closing tags arrives as a special prop named children:

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

function App() {
  return (
    <Card title="Weather">
      <p>Sunny, 24°C</p>
      <p>No rain expected.</p>
    </Card>
  );
}

The two paragraphs become children and render where {children} appears. Card does not know or care what is inside it.

Why children matters

children lets you build wrapper components: cards, modals, page layouts, styled panels. The wrapper owns the frame, the caller owns the content. This is the same separation you get from higher-order functions in Advanced JavaScript, where a function receives behavior as an argument instead of hard-coding it.

Typical wrappers in real apps:

• <Layout> wraps every page with a nav bar and footer
• <Modal> wraps any content in an overlay dialog
• <Button> wraps a label or icon in consistent styling

One wrapper, unlimited contents.