jsschools

Children

Utilities for working with the opaque props.children data structure.

Since React 0.14 Spec ↗

Syntax

Children.map / Children.forEach / Children.count / Children.only / Children.toArray

Returns

object — A namespace of helper methods for manipulating children.

Examples

import { Children } from 'react';

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

const count = Children.count(children);
const single = Children.only(children);

Notes

props.children is opaque and may be a single node, an array, or undefined; use these helpers instead of array methods. Children.toArray assigns stable keys and flattens fragments. Modern code often prefers a render prop or explicit array prop over deep children manipulation.

See also