JSX Children Rendering

Elements nested inside JSX tags become child nodes passed to components. A component receives those nested nodes through its `children` prop and can render or compose them where needed.

In JSX, content placed between a component's opening and closing tags is represented as its `children` prop. For example, `<Card><p>Hello</p></Card>` passes the paragraph element to `Card` as `children`.

A component can render `children` directly with `{children}`. The value can be a JSX element, text, a number, or an array of renderable values, depending on what the parent supplies.

Children enable composition: a reusable component can control its surrounding structure without knowing the exact content that will appear inside it. This is useful for components such as layouts, panels, buttons, and wrappers.

`children` is an ordinary prop from the component's perspective. You can destructure it alongside other props, such as `function Card({ title, children }) { ... }`. If no children are supplied, the value is typically `undefined`.

Key points

• Nested JSX content is passed to a component through the `children` prop.
• Render children with `{children}` inside the component's JSX.
• `children` supports composition by letting callers supply arbitrary nested JSX.
• `children` is a prop and can be destructured like other props.

Interview questions

Can `children` contain multiple elements?

Yes. A component can receive multiple nested JSX nodes as its children. For example, `<Panel><h2>Title</h2><p>Body</p></Panel>` supplies both elements as the component's children. The component can render the `children` value without needing to know the exact number of nested elements.

What happens to JSX placed between a component's opening and closing tags?

React passes that nested content to the component through its `children` prop. For example, `<Box><span>Hi</span></Box>` gives `Box` a `children` value containing the span element. The component can render it with `{children}`. This lets the component provide structure while the caller provides the inner content.

How would you create a reusable wrapper component using children?

I would accept `children` as a prop and place it inside the wrapper's JSX. For example, `function Panel({ children }) { return <div>{children}</div>; }`. Callers can then put different content inside `<Panel>...</Panel>`. This keeps the wrapper reusable because it does not need to know the specific child content.

Why is children-based composition useful in frontend development?

It separates a component's structural responsibility from the content supplied by its caller. A layout component can define spacing, borders, or positioning while callers choose the content placed inside it. This reduces duplication and makes components more reusable. It also avoids requiring a wrapper component to know every possible type of content it might display.