no-children-for-each

Full Name in eslint-plugin-react-x

react-x/no-children-for-each

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-for-each

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.

Common Violations

Invalid

import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  const result = [];
  Children.forEach(children, (child, index) => {
    result.push(child);
    result.push(<hr key={index} />);
  });
  // ...
}

Resources

• Rule Source
• Test Source

Further Reading

• Legacy React APIs: Children

See Also

• react-x/no-children-count
  Disallows the use of Children.count 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.
• react-x/no-children-to-array
  Disallows the use of Children.toArray from the react package.