Try @eslint-react/kit@beta →
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 is uncommon and can lead to fragile code. 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