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

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: react.dev