Component Composition and the Children Prop

React's `children` prop is the mechanism for passing JSX content from a parent component into a child component's rendered output. Any JSX placed between a component's opening and closing tags automatically becomes `props.children`. This enables generic container or layout components — such as cards, modals, panels, or page wrappers — to accept arbitrary inner content without knowing anything about it in advance. The children prop can be a single element, a string, an array, or even a function (the last of which is the "render prop" pattern). For simple cases, destructuring `{ children }` from props and placing it in the return value is all that is needed. React also provides the `React.Children` utility API for more advanced scenarios where you need to count, iterate, or clone the children. Composition over configuration is a guiding React principle. Instead of adding an ever-growing list of props to control every variation of a component, you compose smaller, focused components. A `

Example

// Generic Card container — accepts any children
function Card({ title, children, footer }) {
  return (
    <div style={{ border: '1px solid #ccc', borderRadius: 8, padding: 16, margin: 8 }}>
      {title && <h3 style={{ marginTop: 0 }}>{title}</h3>}
      <div>{children}</div>
      {footer && <div style={{ borderTop: '1px solid #eee', marginTop: 8, paddingTop: 8 }}>{footer}</div>}
    </div>
  );
}

// Alert component — wraps children in a styled box
function Alert({ type = 'info', children }) {
  const colors = { info: '#dbeafe', success: '#dcfce7', error: '#fee2e2' };
  return (
    <div style={{ background: colors[type], padding: '10px 16px', borderRadius: 6 }}>
      {children}
    </div>
  );
}

// Composing everything together
function App() {
  return (
    <Card
      title="User Profile"
      footer={<button>Edit Profile</button>}
    >
      <Alert type="success">
        <strong>Welcome back!</strong> Your profile is complete.
      </Alert>
      <p>Name: Alice</p>
      <p>Email: alice@example.com</p>
    </Card>
  );
}

export default App;

HTML

Full Editor

Related Resources

React Reference

Complete tag & property list

React How-To Guides

Step-by-step practical guides

React Exercises

Practice what you've learned