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>
  );
}

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 elementVersionsChangedChangedAddedResourcesFurther ReadingSee Also