logoESLint React
Rules

no-children-map

Disallows the use of 'Children.map' from the 'react' package.

Full Name in eslint-plugin-react-x

react-x/no-children-map

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-map

Presets

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

Rule Details

Using Children.map to transform children 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.
  • Prevents React from optimizing rendering.
  • 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.

Examples

Wrapping each child in a layout element

Using Children.map to wrap children assumes a specific React internals structure that may break. Instead, accept an array of data or let the parent map over items directly.

For example, if you need to wrap items in a styled container, accept an array of data as a prop and map over it:

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

function MyComponent({ items }: MyComponentProps) {
  return (
    <div className="RowList">
      {items.map((item) => (
        <div className="Row" key={item}>
          {item}
        </div>
      ))}
    </div>
  );
}
// 🔴 Problem: Using Children.map to wrap each child in a styled container
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  return (
    <div className="RowList">
      {Children.map(children, (child) => <div className="Row">{child}</div>)}
    </div>
  );
}

Passing structured data as props

Instead of passing React elements as children and wrapping them with Children.map, accept structured data as a prop and map over it directly. This gives you full control over rendering and keys.

// 🟢 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> },
      ]}
    />
  );
}

Versions

Resources

Further Reading

See Also

no-children-for-each

Disallows the use of 'Children.forEach' from the 'react' package.

no-children-only

Disallows the use of 'Children.only' from the 'react' package.

On this page

Rule DetailsExamplesWrapping each child in a layout elementPassing structured data as propsVersionsChangedChangedAddedResourcesFurther ReadingSee Also