Introduction
Component Composition is a React pattern for building larger interfaces by combining smaller, reusable components. Instead of creating one large component with many conditions, you can create focused components and combine them using props and children. Composition makes components more flexible and easier to maintain. It is especially useful for layouts, cards, dialogs, buttons, forms, and reusable UI sections. In this chapter, we will solve practical questions about React Component Composition. React js Component Composition practice questions with solutions to help you understand the concepts.
1. What is Component Composition in React?
Answer:
Component Composition means building a larger UI by combining smaller React components.
For example:
function Header() {
return <h1>My Website</h1>;
}
function Footer() {
return <p>Copyright 2026</p>;
}
function App() {
return (
<div>
<Header />
<main>Welcome to the website</main>
<Footer />
</div>
);
}
Here, App is composed of:
Header- Main content
Footer
Instead of putting everything into one large component, the UI is divided into smaller reusable pieces.
2. How Can children Be Used for Component Composition?
Answer:
The children prop allows a component to render content placed between its opening and closing tags.
Example:
function Card({ children }) {
return (
<div>
{children}
</div>
);
}
Now we can place different content inside the Card:
function App() {
return (
<Card>
<h2>Student Profile</h2>
<p>Name: Rahul</p>
</Card>
);
}
The content inside:
<Card>
...
</Card>
is passed to the Card component through children.
This makes the component flexible because it does not need to know exactly what content will be placed inside it.
3. How Can You Create a Reusable Card Component Using Composition?
Answer:
A reusable Card component can accept its content through children.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
Different cards can now contain different content:
function App() {
return (
<div>
<Card>
<h2>React.js</h2>
<p>Learn React components.</p>
</Card>
<Card>
<h2>JavaScript</h2>
<p>Learn modern JavaScript.</p>
</Card>
</div>
);
}
The same Card component is reused while its internal content changes.
This is one of the simplest examples of component composition.
4. What is the Difference Between Props and children in Composition?
Answer:
Both props and children can be used to make components reusable, but they are commonly used in different ways (React children Props).
A normal prop passes a specific piece of data:
function User({ name }) {
return <h2>{name}</h2>;
}
Usage:
<User name="Rahul" />
children passes nested JSX:
function Card({ children }) {
return <div>{children}</div>;
}
Usage:
<Card>
<h2>Profile</h2>
<p>Student information</p>
</Card>
In simple terms:
Props → Pass specific data/configuration
children → Pass nested UI/content
Both are important tools for component composition.
5. How Can a Layout Component Be Created Using Composition?
Answer:
A layout component can provide a common structure while allowing different content to be inserted.
Example:
function Layout({ children }) {
return (
<div>
<header>
<h1>My Website</h1>
</header>
<main>
{children}
</main>
<footer>
<p>Footer</p>
</footer>
</div>
);
}
Now different pages can use the same layout:
function Home() {
return (
<Layout>
<h2>Home Page</h2>
<p>Welcome to our website.</p>
</Layout>
);
}
Another page can use it:
function About() {
return (
<Layout>
<h2>About Page</h2>
<p>Learn more about us.</p>
</Layout>
);
}
The layout remains the same while the page content changes.
6. How Can Multiple UI Areas Be Composed Using Props?
Answer:
Composition does not have to rely only on children. You can pass React elements through named props.
Example:
function PageLayout({
header,
sidebar,
children,
footer
}) {
return (
<div>
<header>
{header}
</header>
<aside>
{sidebar}
</aside>
<main>
{children}
</main>
<footer>
{footer}
</footer>
</div>
);
}
Use it like this:
function App() {
return (
<PageLayout
header={<h1>Dashboard</h1>}
sidebar={<p>Menu</p>}
footer={<p>Copyright</p>}
>
<h2>Welcome</h2>
<p>Dashboard content</p>
</PageLayout>
);
}
This pattern provides multiple customizable areas.
It is sometimes described as a slots-like composition pattern.
7. How Can Component Composition Make a Button Reusable?
Answer:
A Button component can accept children and other props instead of hardcoding its label.
Example:
function Button({ children, onClick }) {
return (
<button onClick={onClick}>
{children}
</button>
);
}
Now it can be reused:
<Button>
Save
</Button>
<Button>
Delete
</Button>
<Button>
Submit
</Button>
The same component handles all three buttons.
You can also pass other button properties:
function Button({
children,
onClick,
disabled
}) {
return (
<button
onClick={onClick}
disabled={disabled}
>
{children}
</button>
);
}
This keeps the component reusable without creating separate components for every button label.
8. How Can Composition Be Used to Build a Modal Component?
Answer:
A Modal can use children to allow different content to be inserted.
Example:
function Modal({ children, onClose }) {
return (
<div className="modal">
<div className="modal-content">
{children}
<button onClick={onClose}>
Close
</button>
</div>
</div>
);
}
Now the same Modal can display different content:
<Modal onClose={() => setOpen(false)}>
<h2>Delete Account</h2>
<p>Are you sure you want to continue?</p>
</Modal>
Another use:
<Modal onClose={() => setOpen(false)}>
<h2>Welcome!</h2>
<p>Your account has been created.</p>
</Modal>
The Modal controls the common structure while the parent controls the content.
9. Why Is Composition Often Preferred Over Large Conditional Components?
Answer:
A large component can become difficult to maintain when it contains many conditions for different UI variations.
For example:
function Dashboard({ type }) {
if (type === "admin") {
// Large admin UI
}
if (type === "student") {
// Large student UI
}
if (type === "teacher") {
// Large teacher UI
}
}
As the application grows, this can become difficult to manage.
With composition, separate components can be created:
function AdminDashboard() {
return <h2>Admin Dashboard</h2>;
}
function StudentDashboard() {
return <h2>Student Dashboard</h2>;
}
function TeacherDashboard() {
return <h2>Teacher Dashboard</h2>;
}
Then compose them where needed.
Composition can provide:
- Smaller components
- Better reuse
- Clearer responsibilities
- Easier maintenance
- More flexible UI structures
Conditional rendering is still useful when the condition is simple and local. Composition is particularly helpful when different UI structures become complex.
10. Create a Practical Product Card Using Component Composition
Answer:
We can create a reusable ProductCard that uses smaller components.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
function ProductImage({ src, alt }) {
return (
<img
src={src}
alt={alt}
width="150"
/>
);
}
function ProductInfo({ name, price }) {
return (
<div>
<h3>{name}</h3>
<p>Price: ₹{price}</p>
</div>
);
}
function ProductActions({ onBuy }) {
return (
<button onClick={onBuy}>
Buy Now
</button>
);
}
Now compose these components:
function ProductCard({ product }) {
return (
<Card>
<ProductImage
src={product.image}
alt={product.name}
/>
<ProductInfo
name={product.name}
price={product.price}
/>
<ProductActions
onBuy={() =>
console.log(
`Buying ${product.name}`
)
}
/>
</Card>
);
}
Example product:
const product = {
id: 1,
name: "Wireless Mouse",
price: 799,
image: "/mouse.jpg"
};
Use it:
<ProductCard product={product} />
Here, the final product card is composed from smaller reusable components:
ProductCard
│
├── Card
├── ProductImage
├── ProductInfo
└── ProductActions
This approach makes each component responsible for a focused part of the UI while allowing the final interface to be assembled through composition.
Key Takeaways
- Component Composition means combining smaller components to build larger interfaces.
childrenis a major tool for composition.- Props can also receive React elements for customizable UI areas.
- Composition makes components more flexible and reusable.
- Layout components can use
childrento provide a common page structure. - Named element props can create multiple customizable UI areas.
- Reusable Cards, Modals, Buttons, and Layouts are common composition examples.
- Composition can reduce the need for large components with many UI variations.
- Components can be composed at multiple levels.
- Composition is about combining components, not sharing state automatically.
- Props pass data or UI configuration from a parent to a child.
- Good component composition keeps responsibilities clear and focused.
FAQs
1. What is Component Composition in React?
Component Composition is the practice of combining smaller React components to create larger and reusable user interfaces.
2. What is the role of children in Component Composition?
children allows a component to receive and render nested JSX, making the component flexible about what content appears inside it.
3. Can React components be passed as props?
Yes. React elements, components, functions, objects, and other values can be passed through props depending on the design of the component.
4. Is Component Composition better than using props?
They are not competing approaches. Props are one of the main mechanisms used to achieve composition. children itself is passed as a prop.
5. What are common examples of Component Composition?
Common examples include Layouts, Cards, Modals, Buttons, Dialogs, Forms, Navigation components, and reusable page sections.
6. Does Component Composition share state between components?
No. Composition controls how components are combined. State sharing requires approaches such as lifting state up, Context, or another appropriate state-management pattern.
7. Why is Component Composition useful in large React applications?
It helps create smaller, reusable, and focused components. This can make large interfaces easier to understand, maintain, test, and extend.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
