What is the children prop in React, and when is it useful?
children is the content placed between a component's opening and closing tags. It lets a component wrap whatever the caller supplies, which is how layouts, cards and modals stay reusable.
Explain it simply
Imagine a gift box. The box (the component) does not care what you put inside; it only provides the packaging. In React, whatever you write between <Card> and </Card> arrives inside the component as props.children.
This is called composition. Instead of giving a Card ten props for every possible layout, you let the caller decide the inside.
You can also pass several named slots as ordinary props, such as header={<Logo />} and footer={<Links />}, when one children area is not enough. Both styles are composition, and both keep the wrapper component ignorant of its contents, which makes it easy to reuse across pages.
Example
function Card({ title, children }) {
return (
<section className="card">
<h2>{title}</h2>
{children}
</section>
);
}
<Card title="Fest passes">
<p>Entry: Rs 200</p>
<button>Buy</button>
</Card>children can be text, one element, an array or even a function (the render-prop pattern).
What to say in the interview
"children is a special prop holding whatever JSX is nested inside the component tag. It is the basis of composition: layouts, modals and wrappers render children without knowing what they are. It also helps avoid prop drilling when you pass ready-made elements down."
Common mistakes
- Forgetting to render {children}, so the nested content silently disappears.