Components and Props
Children and Composition
Written by Swapnil RajaPublished
Anything between a component's opening and closing tags arrives as
props.children. It is the difference between a component that configures content and one that wraps it.
The children prop
children is an ordinary prop with a special source: JSX fills it from whatever sits between the tags. That is what lets a component act as a container without knowing what it contains.
A wrapper that knows nothing
jsx
function Panel({ title, children }) {
return (
<section style={{ border: "1px solid #cbd5e1", borderRadius: 10, padding: 14 }}>
<h4 style={{ margin: "0 0 8px" }}>{title}</h4>
{children}
</section>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<div style={{ display: "grid", gap: 12 }}>
<Panel title="Text inside">
<p>Just a paragraph.</p>
</Panel>
<Panel title="Anything else inside">
<ul>
<li>A list</li>
<li>works too</li>
</ul>
<button>And a button</button>
</Panel>
</div>
)