React’s component-based architecture has revolutionized web development by enabling developers to build modular, maintainable, and scalable user interfaces. At the core of this flexibility lies one of React’s most powerful features: children props. Understanding how to effectively use children props is essential for creating flexible, reusable components that form the foundation of modern React applications.

What Are Children Props in React?

Children props refer to the special prop that React automatically passes to every component, containing any content placed between the component’s opening and closing JSX tags. This powerful feature enables component composition and makes React components incredibly flexible.

Children props can include:

• Plain text strings
• React elements and components
• Arrays of multiple elements
• Functions (render props pattern)
• Any valid JSX expression
• Null or undefined (optional children)

Basic Example of Children Props

function Container({ children }) {
  return <div className="container">{children}</div>;
}

// Usage
<Container>
  <h1>Welcome to React</h1>
  <p>This content is passed as children props</p>
</Container>

Why Children Props Matter for Modern React Development

Children props are crucial for several compelling reasons that directly impact your application’s architecture and maintainability:

1. Component Composition

Build complex user interfaces by combining simple, focused components. This follows React’s philosophy of composition over inheritance, allowing you to create sophisticated UIs from basic building blocks.

2. Code Reusability

Create wrapper components that work with any content, eliminating code duplication and promoting DRY (Don’t Repeat Yourself) principles. A single wrapper component can serve multiple use cases across your application.

3. Flexibility and Extensibility

Design components without knowing their content in advance. This makes your components adaptable to various scenarios and future requirements without modification.

4. Separation of Concerns

Keep parent components decoupled from child implementation details. This separation makes your codebase easier to understand, test, and maintain.

5. Better Developer Experience

Create intuitive, declarative component APIs that feel natural to use. Well-designed children props make your components self-documenting and easier for team members to understand.

According to the 2024 Stack Overflow Developer Survey, React remains the most popular frontend framework with over 40% adoption among professional developers. Mastering children props is essential for leveraging React’s full potential and building production-ready applications.

What You’ll Learn in This Comprehensive Guide

This tutorial covers everything from fundamental concepts to advanced patterns used in production applications. You’ll gain practical knowledge about:

• Basic Implementation: How to create and use components with children props
• Advanced Techniques: Conditional rendering, iteration, and transformation of children
• Reusable Patterns: Compound components, render props, and provider patterns
• Performance Optimization: Preventing unnecessary re-renders and memory leaks
• TypeScript Integration: Proper type definitions for children props
• Testing Strategies: How to effectively test components that use children
• Real-World Examples: Production-ready code for modals, layouts, and forms
• Troubleshooting: Common issues and their solutions

2. Understanding React Children Props

The Children Prop Explained

In React, children is a special prop that’s automatically available in every component. Unlike regular props that you explicitly pass with attributes, children are implicitly passed when you include content between a component’s opening and closing tags.

Key Characteristics of Children Props:

• Automatic: Passed to all components without explicit declaration
• Flexible: Can contain any valid JSX content
• Compositional: Acts as a “slot” for nested content
• Accessible: Retrieved via props.children
• Type-Safe: Can be typed in TypeScript for better development experience

Functional Component Example

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

// Usage with single child
<Card>
  <p>Single child element</p>
</Card>

// Usage with multiple children
<Card>
  <h2>Card Title</h2>
  <p>Card description</p>
  <button>Action</button>
</Card>

Class Component Example

class Card extends React.Component {
  render() {
    return <div className="card">{this.props.children}</div>;
  }
}

How Children Props Work Under the Hood

When React processes JSX, content between component tags is transformed into the children prop during the transpilation phase. Understanding this transformation helps you work more effectively with children props.

JSX Transformation Process

// What you write in JSX
<Container>
  <h1>Title</h1>
  <p>Description</p>
</Container>

// What React sees after transpilation (simplified)
React.createElement(
  Container,
  null,
  React.createElement('h1', null, 'Title'),
  React.createElement('p', null, 'Description')
)

Children as Opaque Data Structure

The children prop is considered an opaque data structure, which means:

• It might be a single element, an array, a string, or null
• Its internal structure should not be directly accessed
• You should use React.Children utilities for safe manipulation
• The structure can vary based on what’s passed

Different Types of Children

// Single child - child is the element itself
<Component><span>Single</span></Component>

// Multiple children - child is an array
<Component>
  <span>First</span>
  <span>Second</span>
</Component>

// Text child - child is a string
<Component>Plain text</Component>

// No children - child is undefined
<Component />

Key Benefits and Use Cases

1. Maximum Flexibility

Components can accept any content without hardcoding specific elements, making them adaptable to various scenarios:

function Alert({ children, type }) {
  return <div className={`alert alert-${type}`}>{children}</div>;
}

// Works with any content structure
<Alert type="success">Operation completed successfully!</Alert>
<Alert type="error">
  <strong>Error:</strong> Invalid credentials
</Alert>
<Alert type="warning">
  <h3>Warning</h3>
  <p>This action cannot be undone</p>
  <button>Proceed</button>
</Alert>

2. Composition Over Inheritance

React strongly recommends composition over inheritance. Children props make this pattern natural and intuitive:

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

// Compose different dialogs easily
<Dialog title="Confirm Action">
  <p>Are you sure you want to proceed?</p>
  <button>Confirm</button>
</Dialog>

3. Abstraction and Reusability

Create generic wrappers that enhance any content with additional functionality:

function WithLoading({ isLoading, children }) {
  if (isLoading) {
    return <div className="spinner">Loading...</div>;
  }
  return children;
}

// Reusable loading wrapper
<WithLoading isLoading={isFetching}>
  <UserProfile user={userData} />
</WithLoading>

4. Layout and Structure Components

Build flexible layout systems that work with any content:

function PageLayout({ sidebar, children }) {
  return (
    <div className="page-layout">
      <aside className="sidebar">{sidebar}</aside>
      <main className="main-content">{children}</main>
    </div>
  );
}

// Flexible page structure
<PageLayout sidebar={<Navigation />}>
  <h1>Dashboard</h1>
  <DashboardContent />
</PageLayout>

5. Context and State Management

Wrap components with context providers seamlessly:

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Clean context wrapping
<ThemeProvider>
  <App />
</ThemeProvider>

3. Basic Implementation Guide

Creating Your First Component with Children Props

Let’s start with practical examples that demonstrate fundamental children props usage. These patterns form the foundation for more complex implementations.

Simple Wrapper Component

function Panel({ children }) {
  return (
    <div className="panel">
      <div className="panel-body">
        {children}
      </div>
    </div>
  );
}

// Usage in your application
function App() {
  return (
    <Panel>
      <h2>Welcome</h2>
      <p>This is panel content</p>
    </Panel>
  );
}

Component with Additional Props

function Section({ title, subtitle, children }) {
  return (
    <section className="section">
      {title && <h2 className="section-title">{title}</h2>}
      {subtitle && <p className="section-subtitle">{subtitle}</p>}
      <div className="section-content">
        {children}
      </div>
    </section>
  );
}

// Usage
<Section title="About Us" subtitle="Learn more about our company">
  <p>Company history and mission...</p>
  <ContactInfo />
</Section>

Passing Content Between Component Tags

Understanding the different ways to pass content as children helps you choose the right approach for each situation.

1. Single Element Children

<Container>
  <h1>Single heading element</h1>
</Container>

2. Multiple Element Children

<Container>
  <h1>Title</h1>
  <p>Description</p>
  <button>Action</button>
</Container>

3. Component Children

<Container>
  <Header />
  <MainContent />
  <Footer />
</Container>

4. Text and Expression Children

<Container>
  Plain text content
</Container>

<Container>
  {isLoggedIn ? <Dashboard /> : <Login />}
</Container>

<Container>
  {items.map(item => <Item key={item.id} {...item} />)}
</Container>

5. Mixed Content Children

<Container>
  Text before component
  <Component />
  Text after component
  {someExpression}
</Container>

Practical Code Examples

Example 1: Customizable Button Component

function Button({ children, variant = 'primary', size = 'medium', onClick }) {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// Usage examples
<Button variant="primary" onClick={handleSave}>
  Save Changes
</Button>

<Button variant="success" size="large">
  <Icon name="check" /> Confirm
</Button>

<Button variant="danger" size="small">
  Delete
</Button>

Example 2: Card Component with Header and Footer

function Card({ header, footer, children }) {
  return (
    <div className="card">
      {header && <div className="card-header">{header}</div>}
      <div className="card-body">{children}</div>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
}

// Usage
<Card 
  header={<h3>Product Details</h3>}
  footer={<button>Add to Cart</button>}
>
  <p>Product description here...</p>
  <span className="price">$99.99</span>
</Card>

Example 3: Flexible Grid Layout

function Grid({ columns = 3, gap = '1rem', children }) {
  const gridStyle = {
    display: 'grid',
    gridTemplateColumns: `repeat(${columns}, 1fr)`,
    gap: gap
  };
  
  return <div style={gridStyle}>{children}</div>;
}

function GridItem({ span = 1, children }) {
  const itemStyle = {
    gridColumn: `span ${span}`
  };
  
  return <div style={itemStyle}>{children}</div>;
}

// Usage
<Grid columns={4} gap="2rem">
  <GridItem span={2}>
    <FeaturedCard />
  </GridItem>
  <GridItem>
    <Card />
  </GridItem>
  <GridItem>
    <Card />
  </GridItem>
  <GridItem span={4}>
    <FullWidthContent />
  </GridItem>
</Grid>

Example 4: Conditional Wrapper Component

function ConditionalWrapper({ condition, wrapper, children }) {
  return condition ? wrapper(children) : children;
}

// Usage: Conditionally link content
<ConditionalWrapper
  condition={hasLink}
  wrapper={(children) => <a href={url}>{children}</a>}
>
  <img src={imageSrc} alt="Product" />
</ConditionalWrapper>

Example 5: Box Component with Styling Props

function Box({ padding, margin, bg, children }) {
  const boxStyle = {
    padding: padding || '1rem',
    margin: margin || '0',
    backgroundColor: bg || 'transparent'
  };
  
  return <div style={boxStyle}>{children}</div>;
}

// Usage
<Box padding="2rem" bg="#f5f5f5">
  <h2>Styled Content</h2>
  <p>Content with custom styling</p>
</Box>

4. Advanced Children Props Techniques

Conditional Rendering Patterns

Combine children props with conditional logic to create dynamic, responsive components that adapt to different states and conditions.

Basic Conditional Rendering

function Alert({ children, type = 'info', showIcon = true }) {
  const icons = {
    success: '✓',
    error: '✗',
    warning: '⚠',
    info: 'ℹ'
  };

  return (
    <div className={`alert alert-${type}`}>
      {showIcon && <span className="alert-icon">{icons[type]}</span>}
      <div className="alert-content">{children}</div>
    </div>
  );
}

// Usage
<Alert type="error" showIcon={true}>
  <strong>Error:</strong> Failed to save changes
</Alert>

Error Boundary Implementation

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h2>Something went wrong</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            Try Again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <ComponentThatMightError />
</ErrorBoundary>

Protected Route Pattern

function ProtectedRoute({ isAuthenticated, redirectTo, children }) {
  if (!isAuthenticated) {
    return <Navigate to={redirectTo} replace />;
  }
  
  return children;
}

// Usage
<ProtectedRoute isAuthenticated={user.loggedIn} redirectTo="/login">
  <Dashboard />
</ProtectedRoute>

Feature Flag Component

function FeatureFlag({ feature, fallback = null, children }) {
  const { isEnabled } = useFeatureFlags();
  
  if (!isEnabled(feature)) {
    return fallback;
  }
  
  return children;
}

// Usage
<FeatureFlag feature="new-dashboard" fallback={<OldDashboard />}>
  <NewDashboard />
</FeatureFlag>

Iterating and Mapping Children

React provides the React.Children API for safely working with children as a collection. This is essential when you need to iterate, count, or transform children.

Using React.Children.map

import { Children } from 'react';

function List({ children }) {
  return (
    <ul className="list">
      {Children.map(children, (child, index) => (
        <li key={index} className="list-item">
          {child}
        </li>
      ))}
    </ul>
  );
}

// Usage
<List>
  <span>First item</span>
  <span>Second item</span>
  <span>Third item</span>
</List>

Counting Children

function ChildCounter({ children, maxChildren }) {
  const count = Children.count(children);
  
  if (maxChildren && count > maxChildren) {
    console.warn(`Too many children: ${count}/${maxChildren}`);
  }
  
  return (
    <div>
      <p>Number of items: {count}</p>
      {children}
    </div>
  );
}

// Usage
<ChildCounter maxChildren={5}>
  <Item />
  <Item />
  <Item />
</ChildCounter>

Converting Children to Array

function SortableList({ children, sortBy }) {
  const childArray = Children.toArray(children);
  
  const sorted = childArray.sort((a, b) => {
    // Custom sorting logic
    return a.props[sortBy] - b.props[sortBy];
  });
  
  return <div>{sorted}</div>;
}

// Usage
<SortableList sortBy="priority">
  <Task priority={3} />
  <Task priority={1} />
  <Task priority={2} />
</SortableList>

Filtering Children

function FilteredChildren({ children, filterFn }) {
  const childArray = Children.toArray(children);
  const filtered = childArray.filter(filterFn);
  
  return <>{filtered}</>;
}

// Usage
<FilteredChildren 
  filterFn={(child) => child.props.visible !== false}
>
  <Item visible={true} />
  <Item visible={false} />
  <Item visible={true} />
</FilteredChildren>

Getting Only First or Last Child

function FirstChild({ children }) {
  const childArray = Children.toArray(children);
  return childArray[0] || null;
}

function LastChild({ children }) {
  const childArray = Children.toArray(children);
  return childArray[childArray.length - 1] || null;
}

// Usage
<FirstChild>
  <div>This will render</div>
  <div>This won't</div>
</FirstChild>

Transforming and Cloning Children Elements

Use React.cloneElement to create modified copies of children elements with additional or changed props. This is powerful for enhancing child components.

Adding Props to Children

function EnhancedChildren({ children, className, onClick }) {
  return Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        className: `${child.props.className || ''} ${className}`.trim(),
        onClick: (e) => {
          onClick?.(e);
          child.props.onClick?.(e);
        }
      });
    }
    return child;
  });
}

// Usage
<EnhancedChildren className="enhanced" onClick={handleClick}>
  <div>This gets enhanced</div>
  <span>This too</span>
</EnhancedChildren>

Injecting Context to Children

function WithTheme({ children, theme }) {
  return Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { theme });
    }
    return child;
  });
}

// Usage
<WithTheme theme="dark">
  <Button>Themed Button</Button>
  <Card>Themed Card</Card>
</WithTheme>

Adding Event Tracking

function ClickTracker({ children, onChildClick, trackingId }) {
  return Children.map(children, (child, index) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        onClick: (e) => {
          // Track the click
          onChildClick?.({
            trackingId,
            childIndex: index,
            childType: child.type,
            event: e
          });
          
          // Call original onClick if exists
          child.props.onClick?.(e);
        }
      });
    }
    return child;
  });
}

// Usage
<ClickTracker 
  trackingId="homepage-cta" 
  onChildClick={logAnalytics}
>
  <button>Click Me</button>
  <a href="/learn-more">Learn More</a>
</ClickTracker>

Responsive Children Wrapper

function ResponsiveWrapper({ children, mobileComponent, desktopComponent }) {
  const isMobile = useMediaQuery('(max-width: 768px)');
  
  return Children.map(children, child => {
    if (React.isValidElement(child)) {
      const WrapperComponent = isMobile ? mobileComponent : desktopComponent;
      return <WrapperComponent>{child}</WrapperComponent>;
    }
    return child;
  });
}

// Usage
<ResponsiveWrapper 
  mobileComponent={MobileCard} 
  desktopComponent={DesktopCard}
>
  <Content />
</ResponsiveWrapper>

Adding Accessibility Props

function AccessibleList({ children, ariaLabel }) {
  return (
    <ul role="list" aria-label={ariaLabel}>
      {Children.map(children, (child, index) => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, {
            role: 'listitem',
            'aria-setsize': Children.count(children),
            'aria-posinset': index + 1
          });
        }
        return child;
      })}
    </ul>
  );
}

// Usage
<AccessibleList ariaLabel="Product features">
  <li>Feature 1</li>
  <li>Feature 2</li>
  <li>Feature 3</li>
</AccessibleList>

5. Building Reusable Components with Children Props

Component Composition Best Practices

Follow the Single Responsibility Principle and create small, focused components that can be composed together to build complex UIs.

Card Component System

// Base card component
function Card({ children, variant = 'default' }) {
  return <div className={`card card-${variant}`}>{children}</div>;
}

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

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

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

function CardTitle({ children }) {
  return <h3 className="card-title">{children}</h3>;
}

function CardDescription({ children }) {
  return <p className="card-description">{children}</p>;
}

// Usage - flexible composition
<Card variant="elevated">
  <CardHeader>
    <CardTitle>Product Name</CardTitle>
    <CardDescription>Short description</CardDescription>
  </CardHeader>
  <CardBody>
    <img src="product.jpg" alt="Product" />
    <p>Detailed product information...</p>
  </CardBody>
  <CardFooter>
    <button>Add to Cart</button>
    <button>View Details</button>
  </CardFooter>
</Card>

Compound Component Pattern

Create components that work together as a cohesive unit, sharing implicit state without prop drilling.

Advanced Tabs Component

import { createContext, useContext, useState } from 'react';

// Create context for tabs
const TabsContext = createContext();

function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

function TabList({ children }) {
  return <div className="tab-list" role="tablist">{children}</div>;
}

function Tab({ children, index }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  const isActive = activeIndex === index;
  
  return (
    <button
      className={`tab ${isActive ? 'active' : ''}`}
      role="tab"
      aria-selected={isActive}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
}

function TabPanels({ children }) {
  return <div className="tab-panels">{children}</div>;
}

function TabPanel({ children, index }) {
  const { activeIndex } = useContext(TabsContext);
  
  if (activeIndex !== index) return null;
  
  return (
    <div className="tab-panel" role="tabpanel">
      {children}
    </div>
  );
}

// Usage
<Tabs defaultIndex={0}>
  <TabList>
    <Tab index={0}>Overview</Tab>
    <Tab index={1}>Specifications</Tab>
    <Tab index={2}>Reviews</Tab>
  </TabList>
  <TabPanels>
    <TabPanel index={0}>
      <h2>Product Overview</h2>
      <p>Overview content...</p>
    </TabPanel>
    <TabPanel index={1}>
      <h2>Specifications</h2>
      <ul><li>Spec 1</li></ul>
    </TabPanel>
    <TabPanel index={2}>
      <h2>Customer Reviews</h2>
      <ReviewList />
    </TabPanel>
  </TabPanels>
</Tabs>

Real-World Reusable Patterns

Render Props Pattern

function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return children({ data, loading, error });
}

// Usage
<DataFetcher url="https://api.example.com/users">
  {({ data, loading, error }) => {
    if (loading) return <Spinner />;
    if (error) return <ErrorMessage error={error} />;
    return <UserList users={data} />;
  }}
</DataFetcher>

HOC Pattern with Children

function withAuthentication(Component) {
  return function AuthenticatedComponent({ children, ...props }) {
    const { user, loading } = useAuth();
    
    if (loading) {
      return <LoadingScreen />;
    }
    
    if (!user) {
      return <LoginPrompt />;
    }
    
    return <Component {...props}>{children}</Component>;
  };
}

// Usage
const AuthenticatedDashboard = withAuthentication(Dashboard);

<AuthenticatedDashboard>
  <DashboardContent />
</AuthenticatedDashboard>

Provider Pattern

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const [fontSize, setFontSize] = useState('medium');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  const value = {
    theme,
    fontSize,
    setTheme,
    setFontSize,
    toggleTheme
  };

  return (
    <ThemeContext.Provider value={value}>
      <div className={`theme-${theme} font-${fontSize}`}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

// Usage
<ThemeProvider>
  <App />
</ThemeProvider>

Slot Pattern

function Layout({ header, sidebar, footer, children }) {
  return (
    <div className="layout">
      {header && <header className="layout-header">{header}</header>}
      <div className="layout-main">
        {sidebar && <aside className="layout-sidebar">{sidebar}</aside>}
        <main className="layout-content">{children}</main>
      </div>
      {footer && <footer className="layout-footer">{footer}</footer>}
    </div>
  );
}

// Usage
<Layout
  header={<Header />}
  sidebar={<Navigation />}
  footer={<Footer />}
>
  <PageContent />
</Layout>

6. Performance Optimization with Children Props

Preventing Unnecessary Re-renders

Understanding how children props affect rendering is crucial for building performant React applications.

Problem: Children Recreated on Every Render

// BAD: Child component re-renders unnecessarily
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveChild>
        <HeavyComponent />
      </ExpensiveChild>
    </div>
  );
}

Solution 1: Extract Children to Separate Component

// GOOD: Children component doesn't re-render
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveChildWrapper />
    </div>
  );
}

function ExpensiveChildWrapper() {
  return (
    <ExpensiveChild>
      <HeavyComponent />
    </ExpensiveChild>
  );
}

Solution 2: Pass Children as Props

// GOOD: Children defined outside parent
function App() {
  return <Parent><ExpensiveChild /></Parent>;
}

function Parent({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      {children}
    </div>
  );
}

Using React.memo with Children Props

Memoizing Wrapper Components

import { memo } from 'react';

const ExpensiveWrapper = memo(({ children, theme }) => {
  console.log('ExpensiveWrapper rendered');
  
  // Expensive computation
  const computedStyle = expensiveStyleCalculation(theme);
  
  return (
    <div style={computedStyle}>
      {children}
    </div>
  );
});

function Parent() {
  const [count, setCount] = useState(0);
  
  // Memoize children to prevent recreation
  const memoizedChildren = useMemo(
    () => <HeavyComponent />,
    [] // Empty deps - children never change
  );

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveWrapper theme="dark">
        {memoizedChildren}
      </ExpensiveWrapper>
    </div>
  );
}

Memoizing Children Based on Dependencies

function DataDisplay({ data }) {
  const [filter, setFilter] = useState('');
  
  // Re-memoize only when data changes, not when filter changes
  const memoizedChildren = useMemo(
    () => <ExpensiveChart data={data} />,
    [data]
  );

  return (
    <div>
      <input 
        value={filter} 
        onChange={(e) => setFilter(e.target.value)} 
        placeholder="Filter..."
      />
      <Wrapper>
        {memoizedChildren}
      </Wrapper>
    </div>
  );
}

Common Performance Pitfalls to Avoid

Pitfall 1: Inline Functions as Children

// BAD: New function created every render
function Parent() {
  return (
    <Child>
      {() => <div>Content</div>}
    </Child>
  );
}

// GOOD: Stable function reference
const renderContent = () => <div>Content</div>;

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

// BETTER: Use useCallback for functions with dependencies
function Parent({ userId }) {
  const renderContent = useCallback(
    () => <UserProfile userId={userId} />,
    [userId]
  );
  
  return <Child>{renderContent}</Child>;
}

Pitfall 2: Inline Object/Array Props

// BAD: New object every render
function Parent({ children }) {
  return (
    <Container style={{ padding: '20px', margin: '10px' }}>
      {children}
    </Container>
  );
}

// GOOD: Extract to constant
const containerStyle = { padding: '20px', margin: '10px' };

function Parent({ children }) {
  return (
    <Container style={containerStyle}>
      {children}
    </Container>
  );
}

// BETTER: Use useMemo for computed styles
function Parent({ children, theme }) {
  const containerStyle = useMemo(
    () => ({ padding: '20px', backgroundColor: theme.bg }),
    [theme.bg]
  );
  
  return (
    <Container style={containerStyle}>
      {children}
    </Container>
  );
}

Pitfall 3: Cloning Children in Render

// BAD: Expensive cloning on every render
function Wrapper({ children }) {
  return Children.map(children, child =>
    React.cloneElement(child, { className: 'enhanced' })
  );
}

// GOOD: Memoize the cloning operation
const Wrapper = memo(({ children }) => {
  const enhancedChildren = useMemo(
    () => Children.map(children, child =>
      React.cloneElement(child, { className: 'enhanced' })
    ),
    [children]
  );
  
  return <>{enhancedChildren}</>;
});

Performance Best Practices Summary

// Optimal pattern for performant children props
const OptimizedComponent = memo(({ children, config }) => {
  // 1. Memoize expensive computations
  const processedData = useMemo(
    () => expensiveOperation(config),
    [config]
  );
  
  // 2. Memoize callbacks
  const handleEvent = useCallback(
    (e) => {
      // Handle event with config
    },
    [config]
  );
  
  // 3. Memoize transformed children if needed
  const enhancedChildren = useMemo(
    () => {
      if (!config.enhance) return children;
      
      return Children.map(children, child =>
        React.isValidElement(child)
          ? React.cloneElement(child, { onEvent: handleEvent })
          : child
      );
    },
    [children, config.enhance, handleEvent]
  );
  
  return (
    <div className="optimized">
      <DataDisplay data={processedData} />
      {enhancedChildren}
    </div>
  );
});

7. Production-Ready Examples

Modal and Dialog Components

Full-Featured Modal Component

import { createPortal } from 'react-dom';
import { useEffect, useCallback } from 'react';

function Modal({ isOpen, onClose, title, children, size = 'medium' }) {
  // Lock body scroll when modal is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
      return () => {
        document.body.style.overflow = 'unset';
      };
    }
  }, [isOpen]);

  // Close on Escape key
  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') onClose();
    };
    
    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      return () => document.removeEventListener('keydown', handleEscape);
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div 
        className={`modal-content modal-${size}`}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
      >
        <div className="modal-header">
          <h2 id="modal-title">{title}</h2>
          <button 
            className="modal-close" 
            onClick={onClose}
            aria-label="Close modal"
          >
            ×
          </button>
        </div>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>,
    document.body
  );
}

// Usage
function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      
      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        title="Confirmation Required"
        size="large"
      >
        <p>Are you sure you want to proceed with this action?</p>
        <div className="modal-actions">
          <button onClick={() => setIsOpen(false)}>Cancel</button>
          <button onClick={handleConfirm}>Confirm</button>
        </div>
      </Modal>
    </>
  );
}

Layout and Grid Systems

Flexible Layout System

function PageLayout({ header, sidebar, footer, children }) {
  return (
    <div className="page-layout">
      {header && (
        <header className="page-header">
          {header}
        </header>
      )}
      
      <div className="page-main">
        {sidebar && (
          <aside className="page-sidebar">
            {sidebar}
          </aside>
        )}
        
        <main className="page-content">
          {children}
        </main>
      </div>
      
      {footer && (
        <footer className="page-footer">
          {footer}
        </footer>
      )}
    </div>
  );
}

// Responsive Grid System
function Grid({ 
  children, 
  cols = { xs: 1, sm: 2, md: 3, lg: 4 },
  gap = '1rem' 
}) {
  const gridStyle = {
    display: 'grid',
    gap: gap,
    gridTemplateColumns: `repeat(${cols.xs}, 1fr)`,
  };

  return (
    <div 
      style={gridStyle}
      className="responsive-grid"
      data-cols-sm={cols.sm}
      data-cols-md={cols.md}
      data-cols-lg={cols.lg}
    >
      {children}
    </div>
  );
}

// Usage
<PageLayout
  header={<Header />}
  sidebar={<Navigation />}
  footer={<Footer />}
>
  <Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap="2rem">
    <Card>Item 1</Card>
    <Card>Item 2</Card>
    <Card>Item 3</Card>
    <Card>Item 4</Card>
  </Grid>
</PageLayout>

Form Wrapper Components

Production Form System

function Form({ onSubmit, children, validation = true }) {
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    
    if (validation) {
      const validationErrors = validateForm(data);
      if (Object.keys(validationErrors).length > 0) {
        setErrors(validationErrors);
        return;
      }
    }
    
    setErrors({});
    onSubmit(data);
  };

  return (
    <form onSubmit={handleSubmit} className="form" noValidate>
      {Children.map(children, child => {
        if (React.isValidElement(child) && child.props.name) {
          return React.cloneElement(child, {
            error: errors[child.props.name]
          });
        }
        return child;
      })}
    </form>
  );
}

function FormGroup({ label, name, error, required, children }) {
  return (
    <div className="form-group">
      {label && (
        <label htmlFor={name}>
          {label}
          {required && <span className="required">*</span>}
        </label>
      )}
      {children}
      {error && <span className="error-message">{error}</span>}
    </div>
  );
}

// Usage
<Form onSubmit={handleSubmit}>
  <FormGroup label="Username" name="username" required>
    <input 
      type="text" 
      name="username" 
      placeholder="Enter username"
    />
  </FormGroup>
  
  <FormGroup label="Email" name="email" required>
    <input 
      type="email" 
      name="email" 
      placeholder="Enter email"
    />
  </FormGroup>
  
  <FormGroup label="Password" name="password" required>
    <input 
      type="password" 
      name="password" 
      placeholder="Enter password"
    />
  </FormGroup>
  
  <button type="submit">Submit</button>
</Form>

8. Testing Components with Children Props

Writing Unit Tests for Components with Children

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Container Component', () => {
  test('renders children correctly', () => {
    render(
      <Container>
        <h1>Test Heading</h1>
        <p>Test paragraph</p>
      </Container>
    );

    expect(screen.getByText('Test Heading')).toBeInTheDocument();
    expect(screen.getByText('Test paragraph')).toBeInTheDocument();
  });

  test('applies correct className to wrapper', () => {
    const { container } = render(
      <Container>
        <span>Content</span>
      </Container>
    );

    expect(container.firstChild).toHaveClass('container');
  });

  test('renders with no children', () => {
    const { container } = render(<Container />);
    expect(container.firstChild).toBeInTheDocument();
  });

  test('passes props to children', () => {
    render(
      <PropsInjector theme="dark">
        <TestChild />
      </PropsInjector>
    );

    expect(screen.getByTestId('child')).toHaveAttribute('data-theme', 'dark');
  });
});

Integration Testing Patterns

describe('Modal Component Integration', () => {
  test('opens and closes correctly', async () => {
    const user = userEvent.setup();
    
    render(<ModalExample />);

    // Modal should not be visible initially
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();

    // Open modal
    await user.click(screen.getByText('Open Modal'));
    expect(screen.getByRole('dialog')).toBeInTheDocument();
    expect(screen.getByText('Modal Content')).toBeVisible();

    // Close with close button
    await user.click(screen.getByLabelText('Close modal'));
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });

  test('closes on escape key', async () => {
    const user = userEvent.setup();
    
    render(<ModalExample />);
    
    await user.click(screen.getByText('Open Modal'));
    expect(screen.getByRole('dialog')).toBeInTheDocument();
    
    await user.keyboard('{Escape}');
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });

  test('locks body scroll when open', async () => {
    const user = userEvent.setup();
    
    render(<ModalExample />);
    
    expect(document.body.style.overflow).toBe('');
    
    await user.click(screen.getByText('Open Modal'));
    expect(document.body.style.overflow).toBe('hidden');
    
    await user.click(screen.getByLabelText('Close modal'));
    expect(document.body.style.overflow).toBe('unset');
  });
});

Testing Tools and Libraries

Essential testing stack for React components with children props:

• Jest: JavaScript testing framework with built-in assertion library
• React Testing Library: Testing utilities focused on user behavior
• @testing-library/user-event: Simulates realistic user interactions
• @testing-library/jest-dom: Custom Jest matchers for DOM elements

// Testing compound components
describe('Tabs Component', () => {
  test('switches between tabs correctly', async () => {
    const user = userEvent.setup();

    render(
      <Tabs>
        <TabList>
          <Tab index={0}>Tab 1</Tab>
          <Tab index={1}>Tab 2</Tab>
          <Tab index={2}>Tab 3</Tab>
        </TabList>
        <TabPanels>
          <TabPanel index={0}>Content 1</TabPanel>
          <TabPanel index={1}>Content 2</TabPanel>
          <TabPanel index={2}>Content 3</TabPanel>
        </TabPanels>
      </Tabs>
    );

    // First tab should be active by default
    expect(screen.getByText('Content 1')).toBeVisible();
    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();

    // Switch to second tab
    await user.click(screen.getByText('Tab 2'));
    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
    expect(screen.getByText('Content 2')).toBeVisible();

    // Switch to third tab
    await user.click(screen.getByText('Tab 3'));
    expect(screen.getByText('Content 3')).toBeVisible();
  });

  test('maintains accessibility attributes', () => {
    render(
      <Tabs>
        <TabList>
          <Tab index={0}>Tab 1</Tab>
        </TabList>
        <TabPanels>
          <TabPanel index={0}>Content</TabPanel>
        </TabPanels>
      </Tabs>
    );

    const tab = screen.getByRole('tab');
    expect(tab).toHaveAttribute('aria-selected', 'true');
  });
});

9. Troubleshooting Common Issues

Debugging Children Props Problems

Issue 1: Children Not Rendering

// PROBLEM: Forgetting to render children
function Wrapper({ children }) {
  return <div className="wrapper"></div>; // Missing {children}!
}

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

// Debugging tip: Add console.log
function Wrapper({ children }) {
  console.log('Children:', children); // Check what's being passed
  return <div className="wrapper">{children}</div>;
}

Issue 2: Missing Keys When Mapping

// PROBLEM: Missing keys cause warnings
function List({ children }) {
  return Children.map(children, child => 
    <li>{child}</li> // Warning: Each child should have a unique key
  );
}

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

// BETTER: Use unique IDs if available
function List({ children }) {
  return Children.map(children, child => {
    const key = child.props.id || child.key || Math.random();
    return <li key={key}>{child}</li>;
  });
}

Issue 3: CloneElement Not Working

// PROBLEM: Trying to clone non-React elements
function Enhancer({ children }) {
  return Children.map(children, child => 
    React.cloneElement(child, { enhanced: true }) // Fails for strings/numbers
  );
}

// SOLUTION: Check if element is valid
function Enhancer({ children }) {
  return Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { enhanced: true });
    }
    return child; // Return as-is if not a valid element
  });
}

TypeScript Type Definitions

Method 1: Using ReactNode

import { ReactNode } from 'react';

interface ContainerProps {
  children: ReactNode;
  className?: string;
}

function Container({ children, className }: ContainerProps) {
  return <div className={className}>{children}</div>;
}

Method 2: Using PropsWithChildren

import { PropsWithChildren } from 'react';

interface ButtonProps {
  variant: 'primary' | 'secondary';
  onClick: () => void;
}

function Button({ 
  children, 
  variant, 
  onClick 
}: PropsWithChildren<ButtonProps>) {
  return (
    <button className={variant} onClick={onClick}>
      {children}
    </button>
  );
}

Method 3: Using FC (Functional Component)

import { FC } from 'react';

interface CardProps {
  title: string;
  elevated?: boolean;
}

const Card: FC<CardProps> = ({ children, title, elevated }) => {
  return (
    <div className={elevated ? 'card-elevated' : 'card'}>
      <h3>{title}</h3>
      {children}
    </div>
  );
};

Advanced: Restricting Children Types

import { ReactElement } from 'react';

interface TabsProps {
  children: ReactElement<TabProps> | ReactElement<TabProps>[];
}

function Tabs({ children }: TabsProps) {
  // TypeScript ensures only Tab components are passed
  return <div className="tabs">{children}</div>;
}

// Type-safe render prop
interface DataFetcherProps<T> {
  url: string;
  children: (data: T, loading: boolean) => ReactNode;
}

function DataFetcher<T>({ url, children }: DataFetcherProps<T>) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  
  // ... fetch logic
  
  return <>{children(data as T, loading)}</>;
}

Solutions to Common Errors

Error: “Objects are not valid as a React child”

// PROBLEM: Trying to render an object directly
<Component>
  {{ name: 'John', age: 30 }} // Error!
</Component>

// SOLUTION 1: Stringify the object
<Component>
  {JSON.stringify({ name: 'John', age: 30 })}
</Component>

// SOLUTION 2: Render object properties
<Component>
  <div>Name: {user.name}</div>
  <div>Age: {user.age}</div>
</Component>

Error: “Maximum update depth exceeded”

// PROBLEM: Infinite loop with cloneElement
function BadWrapper({ children }) {
  return Children.map(children, child => 
    React.cloneElement(child, { 
      onClick: () => {
        // This causes re-render, triggering cloneElement again
        this.forceUpdate();
      }
    })
  );
}

// SOLUTION: Use stable references
const GoodWrapper = memo(({ children }) => {
  const handleClick = useCallback(() => {
    // Stable callback function
    console.log('Clicked');
  }, []);

  const enhancedChildren = useMemo(
    () => Children.map(children, child => 
      React.cloneElement(child, { onClick: handleClick })
    ),
    [children, handleClick]
  );

  return <>{enhancedChildren}</>;
});

Error: “Cannot read property ‘map’ of undefined”

// PROBLEM: Children might be undefined
function List({ children }) {
  return children.map(child => <li>{child}</li>); // Error if no children
}

// SOLUTION: Use React.Children API
function List({ children }) {
  return Children.map(children, child => <li>{child}</li>) || null;
}

// OR: Check if children exist
function List({ children }) {
  if (!children) return null;
  return <ul>{children}</ul>;
}

10. Future of Children Props in React

React 19 and Beyond

React 19 introduces several enhancements that improve how we work with children props:

Improved TypeScript Support

React 19 brings better type inference for children props, making TypeScript development more intuitive and reducing the need for explicit type annotations.

Server Components Compatibility

// React Server Component
async function ServerWrapper({ children }) {
  const data = await fetchServerData();
  
  return (
    <div className="server-wrapper">
      <ServerData data={data} />
      {children}
    </div>
  );
}

// Client Component
'use client';

function ClientInteractive({ children }) {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      {children}
    </div>
  );
}

Server Components and Children

React Server Components change how we think about component composition. Children props work seamlessly across the server/client boundary:

// Server Component (default)
async function ProductLayout({ children }) {
  const categories = await db.categories.findMany();
  
  return (
    <div className="product-layout">
      <ServerSidebar categories={categories} />
      <main>{children}</main>
    </div>
  );
}

// Mixed usage
<ProductLayout>
  {/* Server Component */}
  <ProductList products={serverProducts} />
  
  {/* Client Component */}
  <ClientCart />
</ProductLayout>

Community Resources and Learning

Official Documentation:

• React Official Documentation
• React.Children API Reference
• TypeScript React Cheatsheet

Community Forums:

• React Discord Community
• Stack Overflow React Tag
• GitHub React Discussions
• Reddit r/reactjs

Popular Libraries Using Children Props:

• React Router: Navigation and routing
• Material-UI: Comprehensive component library
• Chakra UI: Accessible component system
• Radix UI: Headless component primitives
• Headless UI: Unstyled, accessible components
• Framer Motion: Animation library

11. Conclusion and Best Practices

Summary of Key Takeaways

Throughout this comprehensive guide, we’ve explored the power and versatility of children props in React:

• Fundamental Concept: Children props enable flexible component composition
• Reusability: Create wrapper components that work with any content
• Advanced Patterns: Compound components, render props, and context providers
• Performance: Optimize with React.memo, useMemo, and useCallback
• TypeScript: Proper typing ensures type safety and better DX
• Testing: Comprehensive testing strategies for robust applications
• Production-Ready: Real-world examples for modals, layouts, and forms

Best Practices Checklist

✅ DO:

• Use children props for generic wrapper components
• Leverage React.Children utilities for safe manipulation
• Implement proper TypeScript types for children
• Optimize performance with memoization techniques
• Test components with various children scenarios
• Document expected children structure in components
• Use semantic HTML and accessibility attributes
• Follow composition over inheritance principle
• Extract static children to prevent re-renders
• Use Context API to avoid prop drilling

❌ DON’T:

• Directly mutate the children prop
• Assume children is always an array
• Overuse children when explicit props are clearer
• Forget to handle empty or null children
• Create unnecessary wrapper components
• Neglect accessibility considerations
• Use inline functions or objects as children unnecessarily
• Clone children without memoization in performance-critical paths

Final Recommendations

Mastering children props is essential for building modern React applications. Start with simple wrappers, gradually explore advanced patterns, and always prioritize:

1. User Experience: Fast, responsive interfaces
2. Developer Experience: Intuitive, well-documented APIs
3. Maintainability: Clean, testable code
4. Accessibility: Inclusive design for all users
5. Performance: Optimized rendering and minimal re-renders

Keep experimenting, contribute to open-source projects, and stay updated with the latest React developments. The patterns you’ve learned here will serve as a foundation for building scalable, production-ready React applications.

Frequently Asked Questions (FAQ)

function Container({ children }) {
  return <div className="container">{children}</div>;
}

// Usage
<Container>
  <h1>This is passed as children</h1>
</Container>

// Functional Component
function MyComponent({ children }) {
  return <div>{children}</div>;
}

// Class Component
class MyComponent extends React.Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

<MyComponent>
  <p>First child</p>
  <p>Second child</p>
  <p>Third child</p>
</MyComponent>

// Access multiple children
function MyComponent({ children }) {
  return Children.map(children, (child, index) => (
    <div key={index}>{child}</div>
  ));
}

function EnhancedWrapper({ children }) {
  return Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { 
        className: 'enhanced',
        enhanced: true 
      });
    }
    return child;
  });
}

// Usage
<EnhancedWrapper>
  <div>This will get enhanced props</div>
</EnhancedWrapper>

// props.children - the content itself
function Component({ children }) {
  console.log(children); // Could be element, array, string, etc.
  return <div>{children}</div>;
}

// React.Children - utility methods
function Component({ children }) {
  const count = Children.count(children); // Count children
  const array = Children.toArray(children); // Convert to array
  const mapped = Children.map(children, child => child); // Map over children
  
  return <div>{children}</div>;
}

function ConditionalWrapper({ condition, children }) {
  if (!condition) return null;
  return <div>{children}</div>;
}

// Or with inline conditional
function ConditionalWrapper({ condition, children }) {
  return condition ? <div>{children}</div> : null;
}

// Usage
<ConditionalWrapper condition={isLoggedIn}>
  <UserDashboard />
</ConditionalWrapper>

// Method 1: Using ReactNode
import { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

function MyComponent({ children }: Props) {
  return <div>{children}</div>;
}

// Method 2: Using PropsWithChildren
import { PropsWithChildren } from 'react';

interface Props {
  title: string;
}

function MyComponent({ children, title }: PropsWithChildren<Props>) {
  return <div><h2>{title}</h2>{children}</div>;
}

// Method 3: Using FC (includes children automatically)
import { FC } from 'react';

const MyComponent: FC<{ title: string }> = ({ children, title }) => {
  return <div><h2>{title}</h2>{children}</div>;
};

function DataProvider({ children }) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  
  // Fetch data logic...
  
  return children({ data, loading, setData });
}

// Usage
<DataProvider>
  {({ data, loading }) => (
    loading 
      ? <Spinner /> 
      : <DataDisplay data={data} />
  )}
</DataProvider>

// Optimized pattern
const MemoizedWrapper = memo(({ children }) => {
  return <div className="wrapper">{children}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  
  // Memoize children
  const memoizedChildren = useMemo(
    () => <ExpensiveComponent />,
    []
  );

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <MemoizedWrapper>{memoizedChildren}</MemoizedWrapper>
    </div>
  );
}

// Create context for shared state
const TabsContext = createContext();

function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      {children}
    </TabsContext.Provider>
  );
}

function Tab({ children, index }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  
  return (
    <button 
      className={activeIndex === index ? 'active' : ''}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
}

// Usage - components work together
<Tabs>
  <Tab index={0}>Tab 1</Tab>
  <Tab index={1}>Tab 2</Tab>
</Tabs>

// Method 1: Check before rendering
function Wrapper({ children }) {
  if (!children) {
    return <div>No content provided</div>;
  }
  return <div>{children}</div>;
}

// Method 2: Use React.Children.count
function Wrapper({ children }) {
  const childCount = Children.count(children);
  
  if (childCount === 0) {
    return <EmptyState />;
  }
  
  return <div>{children}</div>;
}

// Method 3: Provide default fallback
function Wrapper({ children, fallback = <DefaultContent /> }) {
  return <div>{children || fallback}</div>;
}

import { render, screen } from '@testing-library/react';

test('renders children correctly', () => {
  render(
    <Wrapper>
      <h1>Test Heading</h1>
      <p>Test content</p>
    </Wrapper>
  );

  expect(screen.getByText('Test Heading')).toBeInTheDocument();
  expect(screen.getByText('Test content')).toBeInTheDocument();
});

test('handles multiple children', () => {
  render(
    <List>
      <span>Item 1</span>
      <span>Item 2</span>
    </List>
  );

  expect(screen.getAllByRole('listitem')).toHaveLength(2);
});