The children Prop
In this page:
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.
Note: Console.log(props.children) inside a component is a quick way to see exactly what was passed in.
Warning: If you write <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.
Note: This pattern is the foundation of most layout and container components in real React apps.
Warning: If your wrapper only renders 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.
Note: Destructure children alongside your other props in the function signature: function Card({ title, children }).
Warning: Remember children is still just 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: