Component composition in React

Introduction

Component composition helps you build complex UIs by combining small, simple pieces. It makes your code easier to understand and reuse.

You want to build a page by putting together smaller parts like header, footer, and content.

You want to reuse a button style in many places but with different text or actions.

You want to create a layout that wraps other components inside it.

You want to pass content from one component to another to customize what shows up.

You want to keep your code organized by splitting big components into smaller ones.

Syntax

React

function Parent() {
  return (
    <Child>
      <GrandChild />
    </Child>
  );
}

function Child({ children }) {
  return <div>{children}</div>;
}

Use children prop to pass nested components inside another component.

Components can be functions that return JSX elements.

Examples

This example shows a Card component wrapping some content passed as children.

React

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>This is inside the card.</p>
    </Card>
  );
}

Here, Toolbar composes two Button components with different labels and actions.

React

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function Toolbar() {
  return (
    <div>
      <Button label="Save" onClick={() => alert('Saved!')} />
      <Button label="Cancel" onClick={() => alert('Canceled!')} />
    </div>
  );
}

This example shows passing components as props to build a page layout.

React

function Layout({ header, content, footer }) {
  return (
    <div>
      <header>{header}</header>
      <main>{content}</main>
      <footer>{footer}</footer>
    </div>
  );
}

function Page() {
  return (
    <Layout
      header={<h1>Welcome</h1>}
      content={<p>This is the main content.</p>}
      footer={<small>© 2024</small>}
    />
  );
}

Sample Program

This React app shows how Container wraps other components and content. The Greeting component is composed inside Container along with a paragraph.

React

import React from 'react';

function Container({ children }) {
  return <section style={{ border: '2px solid #4a90e2', padding: '1rem', borderRadius: '0.5rem' }}>{children}</section>;
}

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

function App() {
  return (
    <Container>
      <Greeting name="Alice" />
      <p>Welcome to the component composition example.</p>
    </Container>
  );
}

export default App;

Important Notes

Always use semantic HTML elements inside components for better accessibility.

Use the children prop to pass nested content easily.

Component composition helps keep your UI code clean and reusable.

Summary

Component composition means building UI by combining smaller components.

Use children or props to pass components inside others.

This approach makes your code easier to read, reuse, and maintain.