React Props Children

Passing content between component tags

👶 What is Props Children?

The children prop is a special prop that allows you to pass content between component opening and closing tags. It enables creating wrapper components that can contain any content or other components. 


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

<Card><h1>Hello!</h1></Card>

Children Prop Features

🎁

Flexible Content

Pass any JSX or components as children 

<Box>
  <h1>Title</h1>
</Box>
🎨

Wrapper Components

Create reusable container components 

<Container>
  {content}
</Container>
🔄

Composition

Build complex UIs from simple parts 

<Layout>
  <Header />
  <Main />
</Layout>
🎯

Automatic Prop

React automatically passes children 

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

🔹 Basic Children Usage

The children prop receives whatever you place between the opening and closing tags of a component. 

function Card({ children }) {
  return (
    <div style={{
      border: '2px solid #ddd',
      borderRadius: '8px',
      padding: '20px',
      margin: '10px'
    }}>
      {children}
    </div>
  );
}

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

Output:

Welcome!

This is inside the card.

🔹 Multiple Children

You can pass multiple elements as children. React will render all of them in the order they appear. 

function Container({ children }) {
  return (
    <div style={{
      backgroundColor: '#f0f0f0',
      padding: '20px',
      borderRadius: '8px'
    }}>
      {children}
    </div>
  );
}

function App() {
  return (
    <Container>
      <h1>Title</h1>
      <p>First paragraph</p>
      <p>Second paragraph</p>
      <button>Click Me</button>
    </Container>
  );
}

Output:

Title

First paragraph

Second paragraph

🔹 Children with Other Props

Combine children with other props to create flexible, customizable components that accept both configuration and content. 

function Alert({ type, children }) {
  const colors = {
    success: '#d4edda',
    warning: '#fff3cd',
    error: '#f8d7da'
  };

  return (
    <div style={{
      backgroundColor: colors[type],
      padding: '15px',
      borderRadius: '4px',
      margin: '10px 0'
    }}>
      {children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Alert type="success">
        <strong>Success!</strong> Operation completed.
      </Alert>
      <Alert type="error">
        <strong>Error!</strong> Something went wrong.
      </Alert>
    </div>
  );
}

Output:

Success! Operation completed.
Error! Something went wrong.

🔹 Nested Children Components

Children can be other React components, allowing you to build complex component hierarchies with clean composition. 

function Panel({ children }) {
  return (
    <div style={{
      border: '1px solid #ccc',
      borderRadius: '8px',
      overflow: 'hidden'
    }}>
      {children}
    </div>
  );
}

function PanelHeader({ children }) {
  return (
    <div style={{
      backgroundColor: '#007cba',
      color: 'white',
      padding: '15px'
    }}>
      {children}
    </div>
  );
}

function PanelBody({ children }) {
  return <div style={{ padding: '15px' }}>{children}</div>;
}

function App() {
  return (
    <Panel>
      <PanelHeader>
        <h3>User Profile</h3>
      </PanelHeader>
      <PanelBody>
        <p>Name: John Doe</p>
        <p>Email: [email protected]</p>
      </PanelBody>
    </Panel>
  );
}

Output:

User Profile

Name: John Doe

Email: [email protected]

🔹 Conditional Children Rendering

You can conditionally render children or provide fallback content when no children are passed. 

function Box({ children, title }) {
  return (
    <div style={{
      border: '2px solid #007cba',
      padding: '20px',
      borderRadius: '8px'
    }}>
      <h3>{title}</h3>
      {children ? (
        children
      ) : (
        <p style={{ color: '#999' }}>No content available</p>
      )}
    </div>
  );
}

function App() {
  return (
    <div>
      <Box title="With Content">
        <p>This box has content!</p>
      </Box>
      <Box title="Empty Box" />
    </div>
  );
}

Output:

With Content

This box has content!

Empty Box

No content available

🔹 Children in Class Components

In class components, access children using this.props.children just like any other prop. 

class Wrapper extends React.Component {
  render() {
    return (
      <div style={{
        backgroundColor: '#e9ecef',
        padding: '20px',
        borderRadius: '8px'
      }}>
        <h2>Wrapper Component</h2>
        {this.props.children}
      </div>
    );
  }
}

// Usage
<Wrapper>
  <p>Content inside wrapper</p>
</Wrapper>

Output:

Wrapper Component

Content inside wrapper

🔹 Common Use Cases

Children props are perfect for these scenarios:

  • Layout Components: Headers, footers, sidebars that wrap content
  • Modal/Dialog: Containers that display dynamic content
  • Cards/Panels: Reusable containers with consistent styling
  • Buttons/Links: Components that wrap text or icons
  • Lists: Components that render collections of items

🧠 Test Your Knowledge

How do you access children in a function component?