The Children Prop

7 min read

children — React's Slot System

Any JSX placed between the opening and closing tags of a component is passed as the special children prop. This enables powerful composition patterns — you write layout components that don't need to know what they're wrapping.

jsx

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

function App() {
  return (
    <Card title="Getting Started">
      <p>Welcome to CPCODELAB! Let's learn React step by step.</p>
      <button>Start Now</button>
    </Card>
  );
}

Prefer children over custom render props whenever you just need to inject arbitrary JSX. It's the simplest and most readable composition pattern.

Ready to test yourself?

Practice React— quiz & coding exercises