React children Prop: Component Composition Explained

The children Prop and Component Composition

What is the children Prop?

Sometimes you want to pass JSX into a component, not just values. React gives you a special prop called children for this.

Anything you place between a component's opening and closing tags arrives as props.children.

Why is it Used?

It lets you build wrapper components — cards, modals, alerts, layout containers — that provide the structure while the parent decides the content.

Syntax

jsx

<Card>
  <h3>Anything here becomes children</h3>
</Card>

Example

src/components/Card.jsx

jsx

function Card({ title, children }) {
  return (
    <div className="card">
      <div className="card-header">
        <h3>{title}</h3>
      </div>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

export default Card;

src/App.jsx

jsx

import Card from "./components/Card";

function App() {
  return (
    <div>
      <Card title="Course Progress">
        <p>You have completed 18 of 40 lessons.</p>
        <p>Keep going — you are 45% done.</p>
      </Card>

      <Card title="Upcoming Deadline">
        <p>Project submission closes on 30 September.</p>
      </Card>
    </div>
  );
}

export default App;

How It Works

• Card receives title as a normal prop and everything between the tags as children.
• {children} renders that content wherever you place it.
• The same Card component now wraps completely different content in both usages.

Note the difference: <Card /> is self-closing when there are no children. <Card>...</Card> uses opening and closing tags when there are.

Output

Two cards with identical styling and headers, but different body content.