Detailed explanation
In React, children is the prop that receives content placed between a component’s opening and closing JSX tags. For example, in <Card title="Stats"><Chart /></Card>, Card receives "Stats" through its title prop and the <Chart /> element through its children prop. This lets Card control the surrounding structure without deciding what belongs inside it. Children can include React elements, text, numbers, arrays of renderable values, or empty values such as null. They are not limited to one nested component.
Composition means building interfaces by combining smaller components. Your Card demonstrates a common form called containment: function Card({ title, children }) { return <div className="card"><h3>{title}</h3>{children}</div>; }. Card owns the container and heading, while its caller chooses the body. The same Card can therefore wrap a chart, a paragraph, or a form without adding content-specific conditions. This separation matters because layout and content can change independently, making components easier to reuse, test, and maintain. Composition is generally preferred over component inheritance in React.
Under the hood, JSX is transformed into calls that create React element descriptions. Nested JSX becomes the children value in the parent element’s props; it is not immediately converted into DOM nodes. When React renders Card, the {children} expression places that supplied content into Card’s returned element tree. React then reconciles the tree and updates the DOM as needed. Card must explicitly render children for that content to appear. A single child need not be an array, so code should not assume children always supports array methods.
Interviewers usually look for a clear distinction between responsibility and content: the wrapper manages presentation, while the caller supplies what it wraps. Ordinary props and children work together rather than competing. Named props such as header or footer can accept JSX when a component needs multiple distinct content areas. Also, nesting Chart inside Card does not automatically pass Card’s title or other props to Chart; shared data must be provided explicitly or through an appropriate mechanism such as context.
Key points to remember
- children receives the content nested between a component’s JSX tags.
- A wrapper displays supplied content by including {children} in its output.
- Composition combines components while keeping layout separate from specific content.
- children is not always an array and can contain several kinds of renderable values.
- Use named JSX props for distinct slots such as header, body, and footer.
Common mistakes candidates make
- Accepting children but forgetting to include {children} in the returned JSX.
- Assuming children is always an array and calling children.map directly.
- Expecting nested components to automatically receive the wrapper’s props.
Likely follow-up questions
How do you handle multiple children?
You can render {children} directly, whether it contains one child or several. If you need to transform or normalise its structure, use React.Children utilities such as Children.map or Children.toArray rather than assuming it is an array.
How is children different from a normal prop?
children is a prop with special JSX syntax: nested content supplies its value. Other props are passed as attributes, but they can also hold React elements, making them useful for named content slots.
Can children be a function?
Yes, a component can define an API that accepts a function as children and explicitly calls it, for example children(data). This is a render-prop pattern; placing that function directly in rendered JSX does not invoke it or display its result.
Interview tip: Explain children using the Card example, then show how replacing Chart with a form demonstrates composition without changing Card.