How to Use React Component with Children

Sometimes, while working on React projects, I want my components to be flexible enough to wrap other components or content inside them.

I’ve been building React applications for over a decade, and one of the most powerful patterns I use daily is props.children. It allows me to compose components in a way that keeps the UI clean, reusable, and easy to maintain.

In this tutorial, I’ll walk you through everything you need to know about React components with children. I’ll share practical examples, explain different methods, and show you how I personally use them in real-world projects.

What is props.children in React?

In React, every component can receive a special prop called children. This prop represents whatever you put between the opening and closing tags of a component. Instead of hardcoding content inside a component, you can pass children dynamically.

Here’s a quick example to demonstrate:

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

export default function App() {
  return (
    <Wrapper>
      <h1>Welcome to my React app</h1>
      <p>This content is passed as children.</p>
    </Wrapper>
  );
}

• The Wrapper component accepts children.
• Inside App, I passed an <h1> and <p> as children.
• The result is a reusable container that can wrap any content.

This is the foundation of React component composition.

Method 1 – Basic Children Usage

The simplest way to use children is to directly render them inside your component.

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

export default function App() {
  return (
    <Card>
      <h2>Product Title</h2>
      <p>Made in the USA, this product is top quality.</p>
    </Card>
  );
}

I executed the above example code and added the screenshot below.

• The Card component outputs a styled container.
• Any content wrapped inside <Card> is displayed where {children} is placed.

This method is perfect when you just need a simple wrapper.

Method 2 – Pass Multiple Children

Sometimes I want to pass multiple elements as children. React makes this easy.

function Layout({ children }) {
  return <main className="layout">{children}</main>;
}

export default function App() {
  return (
    <Layout>
      <header>Header Section</header>
      <section>Content Section</section>
      <footer>Footer Section</footer>
    </Layout>
  );
}

I executed the above example code and added the screenshot below.

• React automatically groups multiple children into an array.
• The Layout component doesn’t care how many children are passed.
• This makes it very flexible for layouts and page structures.

Method 3 – Conditional Rendering with Children

There are times when I only want to render children if certain conditions are met.

function Authenticated({ isLoggedIn, children }) {
  return isLoggedIn ? <>{children}</> : <p>Please log in to continue.</p>;
}

export default function App() {
  return (
    <Authenticated isLoggedIn={true}>
      <h2>Welcome back, user!</h2>
    </Authenticated>
  );
}

I executed the above example code and added the screenshot below.

• The Authenticated component checks if the user is logged in.
• If true, it renders the children. Otherwise, it shows a fallback message.

This is a common pattern in apps that require authentication.

Method 4 – Use React.Children Utilities

React provides helper methods to work with children safely.

import React from "react";

function List({ children }) {
  return (
    <ul>
      {React.Children.map(children, (child, index) => (
        <li key={index}>{child}</li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <List>
      <span>Apple</span>
      <span>Banana</span>
      <span>Cherry</span>
    </List>
  );
}

I executed the above example code and added the screenshot below.

• React.Children.map lets me iterate over children safely.
• It ensures that even if children are not an array, they are handled correctly.

This method is great when building lists or grids.

Method 5 – Pass Functions as Children (Render Props)

Sometimes I prefer to pass a function as a child to give more control.

function DataProvider({ children }) {
  const data = { city: "New York", country: "USA" };
  return children(data);
}

export default function App() {
  return (
    <DataProvider>
      {(info) => (
        <p>
          Location: {info.city}, {info.country}
        </p>
      )}
    </DataProvider>
  );
}

• Instead of static content, I passed a function to children.
• The DataProvider passes data into that function.
• This is known as the render props pattern.

Method 6 – Clone and Modify Children

Sometimes I want to pass additional props to children. React provides React.cloneElement for this.

import React from "react";

function ButtonGroup({ children }) {
  return (
    <div className="button-group">
      {React.Children.map(children, (child) =>
        React.cloneElement(child, { style: { margin: "5px" } })
      )}
    </div>
  );
}

export default function App() {
  return (
    <ButtonGroup>
      <button>Save</button>
      <button>Cancel</button>
    </ButtonGroup>
  );
}

• React.cloneElement allows me to add extra props to children.
• In this case, I added margin styling to all buttons.

This method is useful when you want consistent behavior across all children.

Method 7 – Combine Children with Other Props

You can combine children with other props to create flexible APIs.

function Modal({ title, children }) {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div className="modal-content">{children}</div>
    </div>
  );
}

export default function App() {
  return (
    <Modal title="User Info">
      <p>Name: John Doe</p>
      <p>Location: California, USA</p>
    </Modal>
  );
}

• The Modal accepts a title prop and children.
• This makes the component reusable for different content.

Best Practices for Using Children

• Use children for content injection, not for passing configuration.
• If you need to pass data, prefer props instead of children.
• Use React.Children utilities when working with multiple children.
• Keep children flexible, avoid hardcoding assumptions.

Working with React components and children has completely changed how I structure my applications.

By using props.children, I can build components that are reusable, flexible, and easy to maintain. Whether it’s a simple wrapper, a layout system, or an advanced render props pattern, children give me the freedom to design better UIs.

If you’ve been hardcoding content inside your components, I recommend trying out these methods. Once you start using children effectively, you’ll notice how much cleaner your React code becomes.

You may also like to read:

• Ways to Add a React Code Editor Component
• React Component Folder Structure Best Practices
• Use react-vertical-timeline-component in React
• React cannot update a component while rendering a different component

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/