Children Prop
Overview
While standard props are passed like HTML attributes (<Button text="Click" />), the children prop is a special built-in React prop that allows you to pass data or JSX between the opening and closing tags of a component (<Button>Click</Button>).
Whenever you nest content inside a custom component, React automatically takes everything inside those tags and passes it to the component as a prop explicitly named children.
This is the foundation of Component Composition. It allows you to build 'Wrapper' or 'Container' components (like Modals, Cards, or Layout grids) that don't need to know what they are rendering ahead of time. They simply provide the structural CSS (like a white box with a shadow) and blindly render whatever children the parent decides to inject inside them.
Syntax
// 1. The Wrapper Component (Doesn't care what goes inside it)
function Card({ children }) {
return (
<div className="shadow-lg rounded-xl p-6 bg-white border">
{/* This renders whatever JSX was passed inside the Card tags */}
{children}
</div>
);
}
// 2. The Parent utilizing the wrapper
function App() {
return (
<main>
{/* We pass a simple string as children */}
<Card>Basic Text Content</Card>
{/* We pass complex nested JSX elements as children */}
<Card>
<img src="/user.png" />
<h2>Kartik</h2>
<button>Follow</button>
</Card>
</main>
);
}Common Pitfalls
- Forgetting to render {children}: If you build a
<Modal>component, put content inside<Modal>Hello</Modal>, but forget to explicitly write{children}inside the Modal's JSX, the 'Hello' text will completely disappear and never render.
Interview Questions
Composition is a design pattern where complex components are built by combining smaller, simpler components, rather than relying on deep inheritance. The children prop enables this by allowing a 'Container' component to accept arbitrary React elements from its parent and render them, completely decoupling the container's layout logic from the content it displays.
children be something other than JSX elements?Yes, the children prop can be absolutely anything: a string, a number, an array of elements, or even a function (a pattern known as 'Render Props').
Real-World Example
Building a Reusable Modal Overlay: Without the children prop, you would have to build a separate DeleteModal, LoginModal, and SettingsModal, duplicating the dark overlay code every time. With children, you build one Modal and inject different content on the fly.
// The Modal provides the dark overlay and the centered white box.
// It relies entirely on {children} for its actual content.
function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black/50 flex justify-center items-center">
<div className="bg-white p-8 rounded-lg relative">
<button onClick={onClose} className="absolute top-2 right-2">X</button>
{/* The specific content is injected here */}
{children}
</div>
</div>
);
}
// Usage in an App
function Dashboard() {
return (
<Modal isOpen={true} onClose={() => {}}>
{/* All of this JSX is automatically passed as the 'children' prop */}
<h2 className="text-red-500">Delete Account?</h2>
<p>This action cannot be undone.</p>
<div className="flex gap-4">
<button>Cancel</button>
<button className="bg-red-500">Confirm Delete</button>
</div>
</Modal>
);
}Check Your Knowledge
Test your understanding of Children Prop with these quick questions.