What is children prop in React: Simple Explanation and Example

In React, the children prop is a special property that lets components receive and display nested elements or components passed between their opening and closing tags. It acts like a container for whatever you put inside a component in JSX.

How It Works

Think of a React component as a box. The children prop is like the stuff you put inside that box. When you write JSX with elements inside a component's tags, React automatically passes those inner elements as the children prop to that component.

This means the component can decide where and how to show those inner elements. It’s similar to giving someone a gift box with a surprise inside; the box (component) holds the surprise (children), and the receiver can open it to see or use what’s inside.

This makes components flexible and reusable because they can wrap any content you want without knowing exactly what it is ahead of time.

Example

This example shows a Wrapper component that uses the children prop to display whatever is placed inside it.

jsx

import React from 'react';

function Wrapper({ children }) {
  return <div style={{ border: '2px solid blue', padding: '10px' }}>
    <h3>This is the Wrapper component:</h3>
    {children}
  </div>;
}

export default function App() {
  return (
    <Wrapper>
      <p>Hello, I am inside the Wrapper!</p>
      <button>Click me</button>
    </Wrapper>
  );
}

Output

This is the Wrapper component:
Hello, I am inside the Wrapper!
[Button labeled 'Click me']

When to Use

Use the children prop when you want to create components that can wrap or contain other elements without knowing their exact content in advance. This is common for layout components like cards, modals, or containers that add styling or behavior around any content.

For example, a Modal component can use children to show any message or form inside it. A Button component might use children to display different labels or icons.

This pattern helps keep your UI flexible and your code reusable.

Key Points

• children is a special prop automatically passed to components.
• It contains whatever JSX elements are nested inside the component tags.
• Allows components to wrap and display dynamic content.
• Helps build reusable and flexible UI components.
• Works with any type of React elements, including text, HTML tags, or other components.

Key Takeaways

The children prop holds nested elements passed between a component's tags.

It enables components to wrap and render dynamic content flexibly.

Use children to build reusable layout or container components.

Children can be any valid React elements including text and components.

React automatically passes children; you just access it via props.