The children Prop
In this page:
function ComponentName({ children }) {
return <div>{children}</div>;
}
<ComponentName>
nested content
</ComponentName>What props.children Contains
Whenever you nest content inside a component's tags, like <Box>Hello</Box>, that nested content is automatically passed to the component as props.children. This happens for any component, without you needing to set it up.
<Box></Box> with nothing between the tags, props.children will be undefined.Example: What props.children Contains
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Box(props) {
return <div style={{border: "1px solid gray", padding: "8px"}}>{props.children}</div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Box>Hello from children!</Box>);
</script>
</body>
</html>Building a Reusable Wrapper
Because children is just a normal prop, it's ideal for components whose whole job is to wrap other content, like a styled panel or a modal shell. The wrapper doesn't need to know what's inside -- it just renders props.children wherever it belongs.
props.children and nothing else custom, make sure that's intentional -- otherwise you may be missing your own markup.Example: Building a Reusable Wrapper
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Panel({ children }) {
return (
<section style={{background: "#f5f5f5", padding: "12px"}}>
{children}
</section>
);
}
function App() {
return <Panel><h3>Panel Title</h3><p>Panel content.</p></Panel>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Children Alongside Other Props
A component can accept children together with regular named props at the same time -- they don't conflict. This is common for components like labeled cards or titled sections, where some content is configured via props and other content is nested normally.
children alongside your other props in the function signature: function Card({ title, children }).props.children -- it must be rendered explicitly somewhere in your JSX, or it won't appear.Example: Children Alongside Other Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Card({ title, children }) {
return (
<div style={{border: "1px solid #ccc", padding: "10px"}}>
<h4>{title}</h4>
{children}
</div>
);
}
function App() {
return <Card title="Notice"><p>This uses both a prop and children.</p></Card>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Expecting
props.childrento always be an array -- it can be a single element, string, or undefined. - Forgetting a self-closing component (
<Card />) has no children at all. - Trying to pass
childrenas a named attribute instead of nesting it between tags.
props.childrenholds whatever content is nested between a component's opening and closing tags.- It works automatically -- you don't need to declare it explicitly.
- It's commonly used for wrapper or layout components.
- Children can be text, a single element, multiple elements, or nothing at all.
No browser-specific restrictions -- children is a core React composition feature.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: