Composition pattern basics (Part 1)

If you’re just starting with React, you probably write components like this:

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

<Greeting name="Roman" />

This works great… until you want the same component to look different in different places. Maybe sometimes it needs an icon, sometimes a button, sometimes extra text.

One solution is to add more and more props:

<Greeting
  name="Roman"
  showIcon={true}
  extraText="Welcome back!"
  buttonText="Logout"
/>

But soon your component has 10 props and feels messy.

There’s a cleaner way: composition using the special children prop.

What is children?

In React, anything you put between opening and closing tags becomes the children prop.

<Card>
  This is the content!
</Card>

Here, "This is the content!" is passed as props.children to the Card component.

Example 1: A Simple Card Component

Let’s create a reusable Card that lets you decide exactly what goes inside it.

function Card({ children }) {
  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      padding: '16px',
      margin: '16px 0',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
      maxWidth: '400px'
    }}>
      {children}
    </div>
  );
}

Now use it in many different ways:

// Simple text
<Card>
  Hello! This is a basic card.
</Card>

// With heading + paragraph
<Card>
  <h2>My Profile</h2>
  <p>Roman from Bagmati Province</p>
</Card>

// With image + button
<Card>
  <img
    src="https://example.com/avatar.jpg"
    alt="Avatar"
    style={{ width: '100%', borderRadius: '8px' }}
  />
  <button>Follow</button>
</Card>

No extra props needed — you just put whatever you want inside!

Example 2: Split into Smaller Components

Instead of writing everything inline, you can create small reusable pieces and compose them.

function Avatar() {
  return (
    <img
      src="https://example.com/avatar.jpg"
      alt="User avatar"
      style={{
        width: '60px',
        height: '60px',
        borderRadius: '50%',
        marginBottom: '8px'
      }}
    />
  );
}

function Title({ children }) {
  return <h3 style={{ margin: '0 0 8px 0' }}>{children}</h3>;
}

function Description({ children }) {
  return <p style={{ color: '#666', margin: '0' }}>{children}</p>;
}

Now compose them inside Card:

<Card>
  <Avatar />
  <Title>Roman</Title>
  <Description>Learning React one component at a time!</Description>
</Card>

<Card>
  <Title>Quick Links</Title>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</Card>

You’re building bigger things by combining smaller, focused components — that’s the power of composition!

Why This Matters

• Flexible → Change the content/structure without touching the Card code
• Reusable → One Card component works for profiles, alerts, product cards, modals, etc.
• Readable → The JSX looks like HTML — very declarative
• No prop explosion → Avoid passing 15 props just to customize layout

Quick Recap

• Use children when a component is mainly a container or layout wrapper
• Break complex UIs into small components
• Compose them together by nesting inside a parent

This is the most basic (and most powerful) form of composition in React. Master this first, and later patterns like compound components or context-based composition will feel natural.