How does children work, and why is it fundamental to composition?

What's really being asked

This question probes whether you understand React's core composition model and can distinguish it from configuration via props. The interviewer wants to see that you treat children as a first-class prop, not magic syntax, and that you design wrapper components which delegate content responsibility upward rather than hardcoding it internally.

The full answer

A good answer covers four things in order: first, state that children is simply a prop containing whatever JSX is placed between a component's opening and closing tags; second, describe a wrapper component like Card that returns a styled container div and renders the children prop inside it, letting the parent decide what goes in; third, contrast this with the less flexible approach of passing content through a custom prop such as body or text, explaining that composition keeps presentational wrappers decoupled from their contents; and fourth, note that because children is a prop, you can pass it around, conditionally render it, or manipulate it programmatically just like any other JavaScript value.

The mistakes people make

Common wrong answers include treating children as special syntax rather than a standard prop on the props object; building a Card that accepts a content prop instead of children, which limits consumers to strings or forces extra prop drilling for nested markup; claiming that children can only be a single element, when React actually passes arrays, fragments, or strings; and failing to explain why composition is preferable, such as avoiding deep prop drilling or keeping layout and content concerns separate.

What usually comes next

Likely follow-ups include how you would validate or restrict the types of children a component receives; when you would choose a render prop over children for customization; how the React Children API helps if you need to inspect or augment each child; and what happens to performance if you inline JSX as children versus referencing a stable variable.

A concrete example

Imagine a Card component used like this: Card opening tag, then an h2 heading with Order Summary, then a paragraph with item details, then a button, then Card closing tag. The Card component itself only controls border, padding, and shadow, rendering the children prop inside a div. It never imports heading or button components. This means the same Card can wrap a login form, a product image, or an error message without any internal changes, proving that composition scales where prop-based configuration breaks down.