React 19+ · Const

Children

Children provides utilities for counting, iterating, transforming, asserting, and normalizing a component’s children prop. Because children is opaque, use these methods instead of assuming an array shape.

How it works

The Children namespace provides utilities for inspecting or transforming the opaque value received through a component's children prop. Use its methods rather than assuming children is an array; traversal handles the top-level structure without recursively entering the children of React elements.

Syntax

Children.count(children)
Children.forEach(children, fn, thisArg?)
Children.map(children, fn, thisArg?)
Children.only(children)
Children.toArray(children)

Parameters

Name	Type	Description
`children`	`ReactNode`	The child-node structure received through the component's `children` prop.
`fn`	`function`	Callback invoked for each child by `forEach` or `map`; it receives the child and its index.
`thisArg`	`any`	Optional callback receiver supplied to `forEach` or `map`.

Returns

The individual methods return different results: count returns a number, forEach returns undefined, map returns transformed children, only returns one React element, and toArray returns an array of nodes.

Key points

Import Children from React when a wrapper needs to inspect or transform content supplied by its parent.
Children.count returns the number of nodes in the supplied children structure.
Children.forEach runs a callback for every traversed child and returns no transformed collection.
Children.map is the transformation-oriented utility for producing altered child output.
Treat children as opaque: do not infer its concrete runtime representation or rely on it always being an array.

Common mistakes

Prefer an API designed around explicit data or render props when possible, because Children utilities can make component behavior fragile.
Mapping or counting does not recursively inspect a React element's rendered descendants.
Children.only throws unless the value is exactly one React element; a string, number, fragment, or multiple nodes is not a valid substitute.

Example: Normalize and render children

import { Children } from 'react';

export function Menu({ children }: { children: React.ReactNode }) {
  const items = Children.toArray(children);
  return <ul>{items.map((item, index) => <li key={index}>{item}</li>)}</ul>;
}

This component normalizes opaque children into an array, then renders each node in a list.

When to use it

Transform child nodes

A wrapper needs to add behavior or presentation around each top-level child.

Validate a single element

A component must enforce a one-element child contract.

Normalize children

Code needs a normalized collection for indexing or subsequent array operations.

Count child nodes

A component needs to report or branch on how many top-level nodes it received.

Interview questions

QWhat problem does the Children API solve?

Children operates on the opaque children prop and exposes utilities such as count, forEach, map, only, and toArray. It lets a component inspect or transform top-level child nodes without depending on whether the input happens to be an array.

Follow-up: Why not use children.map directly? Because children is not guaranteed to be an array; its representation is opaque, so the documented Children methods provide the supported operations.

QHow does Children.map traverse its input?

Children.map invokes a callback for each child and returns the transformed result. Empty nodes, strings, numbers, and React elements are treated as individual nodes, while arrays are traversed for their children.

Follow-up: Does mapping traverse a component's rendered output? No. Traversal stops at React elements and does not inspect the elements' own children.

QWhen would you use Children.only?

Children.only validates that children represents exactly one React element and returns that element. It is an assertion, so callers should use it only when the component contract truly requires one element.

Follow-up: What if the caller passes a string or several nodes? The assertion fails, because those values do not satisfy the single-React-element requirement.

ReactNode
Fragment
createElement
Children.count
Children.forEach
Children.map
Children.only
Children.toArray

Source: Children. Checked 2026-10-15.