Component composition is the practice of building larger React interfaces by combining smaller, reusable components. Instead of creating one large component, we can divide the interface into multiple components and combine them together.
Component composition means combining multiple components to create a complete user interface.
App
|
+-- Header
+-- MainContent
+-- Footer
Here, the App component is composed of smaller
components.
Composition helps divide a large application into smaller logical parts.
A large page can be divided into smaller components.
function Header() {
return <header>Header</header>;
}
function Content() {
return <main>Content</main>;
}
function Footer() {
return <footer>Footer</footer>;
}These smaller components can be combined inside another component.
function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}When one component renders another component, the first component can be considered the parent and the rendered component can be considered the child.
function Header() {
return <h1>My Website</h1>;
}
function App() {
return (
<Header />
);
}
Here, App renders Header.
A React application can be represented as a component tree.
App
|
+-- Header
|
+-- Main
| |
| +-- Sidebar
| |
| +-- Content
|
+-- FooterA header can be created as a separate reusable component.
function Header() {
return (
<header>
<h1>
My Website
</h1>
<nav>
Home | About | Contact
</nav>
</header>
);
}function Footer() {
return (
<footer>
<p>
© 2026 My Website
</p>
</footer>
);
}function MainContent() {
return (
<main>
<h2>
Welcome to My Website
</h2>
<p>
Learn React step by step.
</p>
</main>
);
}function App() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
);
}This is a simple example of component composition.
Props can be used to customize composed components.
function Header({ title }) {
return (
<header>
<h1>{title}</h1>
</header>
);
}
function App() {
return (
<Header
title="Soopro Pathshala"
/>
);
}A card component can be designed to accept different information.
function Card({ title, description }) {
return (
<div className="card">
<h2>
{title}
</h2>
<p>
{description}
</p>
</div>
);
}function App() {
return (
<div>
<Card
title="React"
description="Learn React step by step."
/>
<Card
title="JavaScript"
description="Learn JavaScript basics."
/>
</div>
);
}The same component is composed multiple times with different props.
The special children prop is one of the most useful
features for component composition.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
Anything placed between the component's opening and closing tags becomes
available through children.
function App() {
return (
<Card>
<h2>
React Course
</h2>
<p>
Learn React from basics to advanced topics.
</p>
</Card>
);
}function Container({ children }) {
return (
<div className="container">
{children}
</div>
);
}
function App() {
return (
<Container>
<Header />
<MainContent />
<Footer />
</Container>
);
}A layout component can control the general structure of a page while receiving its content through children.
function Layout({ children }) {
return (
<div>
<Header />
<main>
{children}
</main>
<Footer />
</div>
);
}function Home() {
return (
<Layout>
<h1>
Home Page
</h1>
<p>
Welcome to our website.
</p>
</Layout>
);
}Instead of putting the entire application into one large component, composition allows us to divide it into smaller parts.
Large component:
App
|
+-- Header code
+-- Navbar code
+-- Sidebar code
+-- Content code
+-- Footer codeComposed application:
App
|
+-- Header
+-- Navbar
+-- Sidebar
+-- Content
+-- Footerfunction Panel({ children }) {
return (
<section className="panel">
{children}
</section>
);
}
function App() {
return (
<Panel>
<h2>Student Details</h2>
<Student />
<Button />
</Panel>
);
}A component can also receive another component through a prop.
function Layout({ header }) {
return (
<div>
{header}
<main>
Main Content
</main>
</div>
);
}function Header() {
return (
<h1>
My Website
</h1>
);
}
function App() {
return (
<Layout
header={<Header />}
/>
);
}This technique allows the parent to control which component is displayed in a particular area.
Composition is useful for creating reusable UI structures such as:
function Modal({ children }) {
return (
<div className="modal">
<div className="modal-content">
{children}
</div>
</div>
);
}function App() {
return (
<Modal>
<h2>
Delete Student?
</h2>
<p>
Are you sure you want to delete this student?
</p>
<button>
Yes
</button>
<button>
Cancel
</button>
</Modal>
);
}Props and children can be used together to create flexible components.
function Card({
title,
children
}) {
return (
<div className="card">
<h2>
{title}
</h2>
<div>
{children}
</div>
</div>
);
}<Card title="Student Profile">
<p>
Name: Rahul
</p>
<p>
Course: React
</p>
</Card>A real React application can contain many layers of composed components.
App
|
+-- Header
| |
| +-- Logo
| +-- Navbar
|
+-- Dashboard
|
+-- Sidebar
|
+-- MainContent
|
+-- StudentCard
+-- CourseCard
+-- FeeCard
|
+-- Footerfunction Header() {
return (
<header>
<h1>
Student Portal
</h1>
</header>
);
}
function StudentCard({ name, course }) {
return (
<div className="card">
<h2>
{name}
</h2>
<p>
Course: {course}
</p>
</div>
);
}
function Footer() {
return (
<footer>
© 2026 Student Portal
</footer>
);
}
function App() {
return (
<div>
<Header />
<main>
<StudentCard
name="Rahul"
course="React"
/>
<StudentCard
name="Neha"
course="JavaScript"
/>
</main>
<Footer />
</div>
);
}
export default App;
The App component is composed of several smaller,
reusable components.
children for flexible nested content.children prop is especially useful for composition.children.Question: What is the main idea behind component composition in React?