no-children-to-array

Full Name in eslint-plugin-react-x

react-x/no-children-to-array

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-to-array

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule DetailsCopy Anchor Link

Using Children.toArray to materialize the children tree is a form of React child introspection. It creates fragile coupling between parent and child components:

• Breaks when children are wrapped in HOCs, forwardRef, or memo.
• Operates on children as an opaque data structure that does not include the rendered output of child components.
• Creates implicit contracts that types can't enforce.
• Makes composition unpredictable with fragments, portals, and other React features.

Prefer these alternatives:

• Compound components with context
• Render props or slot props
• Data-driven APIs (array of config objects)
• CSS-based solutions (grid, flexbox, :nth-child, etc.)

See common alternatives.

ExamplesCopy Anchor Link

Converting children to an array for manipulationCopy Anchor Link

Children.toArray is the official way to turn children into an array, but the children data structure it operates on is opaque and does not include the rendered output of child components, so logic based on the resulting array can silently misbehave. If you need to reorder or filter items, accept structured data as props instead.

For example, if you need to reverse a list, let the parent pass an array prop and use standard array methods:

// 🟢 Recommended: accept data as an array prop and manipulate it directly
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  const reversed = [...items].reverse();
  return (
    <>
      {reversed.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </>
  );
}

// 🔴 Problem: Using Children.toArray to convert children into an array for manipulation
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  const result = Children.toArray(children);
  result.reverse();
  // ...
}

Passing structured data as propsCopy Anchor Link

Instead of converting children to an array, accept structured data as a prop and use standard array methods. This keeps your component decoupled from React's internal children representation.

// 🟢 Recommended: accept structured data as a prop and map over it
interface Row {
  id: string;
  content: React.ReactNode;
}

interface RowListProps {
  rows: Row[];
}

function RowList({ rows }: RowListProps) {
  return (
    <div className="RowList">
      {rows.map((row) => (
        <div className="Row" key={row.id}>
          {row.content}
        </div>
      ))}
    </div>
  );
}

function App() {
  return (
    <RowList
      rows={[
        { id: "first", content: <p>This is the first item.</p> },
        { id: "second", content: <p>This is the second item.</p> },
        { id: "third", content: <p>This is the third item.</p> },
      ]}
    />
  );
}

ResourcesCopy Anchor Link

• Rule Source
• Test Source
• Rule Changelog

Further ReadingCopy Anchor Link

• React Docs: Children
• Astryx no-react-introspection Rule

See AlsoCopy Anchor Link

• react-x/no-children-count
  Disallows the use of Children.count from the react package.
• react-x/no-children-for-each
  Disallows the use of Children.forEach from the react package.
• react-x/no-children-map
  Disallows the use of Children.map from the react package.
• react-x/no-children-only
  Disallows the use of Children.only from the react package.