What is component composition in React and how do you use children?

Short answer

Composition in React means building components from other components. The children prop and custom props that accept elements let you create flexible wrappers and layouts.

How it works

Instead of a monolithic component that accepts dozens of props to configure internal markup, you expose insertion points. The parent passes JSX into those points.

Example

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

function App() {
  return (
    <Card title="Welcome" actions={<button>Close</button>}>
      <p>This is the card body passed as children.</p>
    </Card>
  );
}

Why it matters

Composition reduces prop drilling, prevents prop explosion, and makes components more reusable. It mirrors how HTML itself works: you nest tags rather than configure them through attributes alone.