Composition with children in React

From the React Components & JSX cheat sheet · Component Patterns & Types · verified Jul 2026

Composition with children

Use the children prop to build flexible, composable layout components

jsx

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

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Content</p>
    </Card>
  );
}

💡 Composition is React favorite pattern — solves most "inheritance" needs cleanly

⚡ Use named slot props (header, sidebar) when you need multiple "children" areas

📌 Composition avoids prop drilling without needing Context for layout components

🟢 Function-as-children gives the parent control while letting children access internal data

compositionchildrenslots

More React tasks

PropTypes & TypeScript
Refs & forwardRef
Compound Components
Higher-Order Components (HOCs)
Render Props

Back to the full React Components & JSX cheat sheet