The children Prop
Whatever you nest inside a component arrives as the children prop.
Syntax
function Card({ children }) {
return <div className="card">{children}</div>;
}Anything you place between a component's opening and closing tags is passed to it automatically as a special prop called children. This lets you build flexible wrapper components.
Why it matters
Instead of hardcoding what a Card or Layout contains, you let the parent decide. This is the foundation of composition in React.
Example
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div>{children}</div>
</div>
);
}
function App() {
return (
<Card title="Welcome">
<p>Anything here becomes children.</p>
<button>Click me</button>
</Card>
);
}When to use it
- A Modal component wraps any JSX passed between its tags so teams can reuse the overlay, backdrop, and close-button logic without knowing the dialog's contents in advance.
- A ProtectedRoute wrapper renders its children only when the user is authenticated, otherwise redirecting to the login page, keeping auth logic in one place.
- A Card component accepts children so product, article, and user detail cards all share the same shadow, border, and padding without copying styles.
More examples
Wrapper using children prop
Renders whatever JSX is nested between the component's tags via the children prop.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
// Usage
// <Card>
// <h2>Order #1234</h2>
// <p>Status: shipped</p>
// </Card>Layout component with children
Combines a named prop (title) with children to build a flexible page shell any view can use.
function PageLayout({ title, children }) {
return (
<div className="page">
<header><h1>{title}</h1></header>
<main>{children}</main>
<footer>© 2026</footer>
</div>
);
}Auth-gated wrapper
Guards rendered children behind an auth check — a real-world pattern for protecting private routes.
function RequireAuth({ user, children }) {
if (!user) {
return <p>Please <a href="/login">log in</a> to continue.</p>;
}
return <>{children}</>;
}
// Usage
// <RequireAuth user={currentUser}>
// <Dashboard />
// </RequireAuth>
Discussion