Passing Children and Composing Components0%
Introduction to Component State

Passing Children and Composing Components

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Passing Children and Composing Components

1. The Special children Prop

In React, when you nest elements inside a component tag, those nested elements are automatically packaged and passed to the component via a reserved prop named children.

This enables component composition, a core architecture design principle in React that allows you to construct flexible, reusable container components without knowing what content will be placed inside them ahead of time.

JSX
// Reusable Container Component
function ModalDialog({ title, children }) {
return (
<div className="modal-backdrop">
<div className="modal-card">
<header className="modal-header">
<h2>{title}</h2>
</header>
<div className="modal-body">
{children} {/* Render whatever is nested inside */}
</div>
</div>
</div>
);
}

Consuming the Component:

JSX
function App() {
return (
<ModalDialog title="Confirm Enrollment">
<p>Are you sure you want to register for Full-Stack Web Development?</p>
<div className="button-row">
<button className="btn-cancel">Cancel</button>
<button className="btn-confirm">Confirm</button>
</div>
</ModalDialog>
);
}

In this example, the <p> and the <div> are passed into ModalDialog as props.children and rendered inside <div className="modal-body">.

2. Containment vs Specialization

React recommends composition over inheritance. You never need to use object-oriented class inheritance (class SpecialDialog extends Dialog) in React. Instead, you compose components using containment and specialization.

Containment (Generic Shells)

A generic shell doesn't know its children in advance (e.g., Card, Sidebar, Panel):

JSX
function Card({ children, className = '' }) {
return <div className={`card-shell ${className}`}>{children}</div>;
}

Specialization (Specific Variants)

Specific components render a generic shell configured with pre-defined props:

JSX
function WelcomeCard({ studentName }) {
return (
<Card className="card-welcome">
<h3>Welcome, {studentName}!</h3>
<p>Pick up where you left off in your curriculum.</p>
</Card>
);
}

3. Multiple Content Slots via Named Props

While children is ideal for the primary body content, sometimes a component needs multiple designated slots (e.g., a header, a body, and an action footer).

You are not restricted to children! You can pass any JSX element or component as a standard named prop:

JSX
function SplitLayout({ leftPanel, rightPanel }) {
return (
<div className="split-layout">
<aside className="layout-left">{leftPanel}</aside>
<main className="layout-right">{rightPanel}</main>
</div>
);
}
 
// Usage:
function CourseScreen() {
return (
<SplitLayout
leftPanel={<CourseSyllabusNavigation />}
rightPanel={<LessonMarkdownViewer />}
/>
);
}
Interactive Quiz

Practice Quiz

Question 1
What is the reserved prop name in React that captures all elements nested between a component's opening and closing tags?
Question 2
What software architecture principle does React recommend over classical class inheritance?
Question 3
How can a component support multiple distinct content regions (such as a sidebar and a main section)?
Question 4
If a component is rendered as <Panel /> with no content inside, what will props.children evaluate to?
Question 5
What is the primary benefit of container components utilizing children?
Next Lesson

Introduction to Component State

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Destructuring Props and Default Prop ValuesIntroduction to Component State

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext