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
Features
🔍
Presets
core
recommended
recommended-typescript
recommended-type-checked
What it does
Prevents the use of Children.forEach
from the react
package.
Why is this bad?
Using Children
is uncommon and can lead to fragile code. See common alternatives.
Examples
Failing
import React, { Children } from "react";
interface ExampleProps {
children: React.ReactNode;
}
function Example({ children }: ExampleProps) {
const result = [];
Children.forEach(children, (child, index) => {
result.push(child);
result.push(<hr key={index} />);
});
// ...
}