Children and Nesting in JSX
In this page:
Nesting Elements Inside Each Other
JSX elements can contain other JSX elements as children, just like nested HTML tags, letting you build up complex UI from smaller pieces.
Note: Indent nested JSX consistently so the parent-child structure stays easy to read at a glance.
Warning: An unclosed nested tag (like a stray <span> with no </span>) breaks the whole JSX structure with a compile error.
Example: Nesting Elements Inside Each Other
<!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() {
return (
<div className="card">
<h3>Title</h3>
<p>Some <strong>nested</strong> content.</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Card />);
</script>
</body>
</html>Mixing Text and Elements as Children
A JSX element's children can freely mix plain text with other elements -- React renders them in the order they appear.
Note: Text and expressions can sit right next to element children without any special wrapping.
Warning: Extra unintended whitespace/newlines between JSX children are usually collapsed by React the same way HTML collapses whitespace, so formatting your JSX for readability won't add stray gaps.
Example: Mixing Text and Elements as Children
<!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 MixedChildren() {
return (
<p>
Hello, <strong>friend</strong>! You have <em>3</em> new messages.
</p>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<MixedChildren />);
</script>
</body>
</html>Passing Multiple Children via props.children
Every component automatically receives a special prop called children, which holds whatever was placed between its opening and closing tags. This lets you build wrapper components -- like a Card or Panel -- that don't need to know in advance what will go inside them. Because children is just a normal prop, you access it the same way as any other prop.
Note: Use props.children when building reusable containers like cards, modals, or layout wrappers so callers control the inner content.
Warning: If a component is self-closing (like <Card />), props.children will be undefined -- always check for its presence before rendering it if the component might be used without content.
Example: Passing Multiple Children via props.children
<!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({ children }) {
return <div style={{border: "1px solid #ccc", padding: "10px"}}>{children}</div>;
}
function App() {
return (
<Card>
<h3>Card Title</h3>
<p>Card body text</p>
</Card>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Forgetting a component using props.children won't render anything if used as a self-closing tag with no content.
- Assuming children is always an array -- it can be a single value, a string, or undefined.
- Manually re-declaring a
childrenprop instead of relying on JSX nesting to provide it automatically.
- Elements can be nested inside each other, just like in HTML.
- JSX children can mix plain text and other elements freely.
- Every component automatically receives its nested content via
props.children. - Wrapper/container components commonly rely on
props.childrento stay flexible.
No browser-specific restrictions -- this is a core JSX/React composition pattern.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: