no-children-for-each
Rule category
Restriction.
What it does
Prevents usage of Children.forEach
.
Why is this bad?
Using Children
is uncommon and can lead to fragile code. See common alternatives.
Examples
Failing
import React, { const Children: {
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
forEach<C>(children: C | readonly C[], fn: (child: C, index: number) => void): void;
count(children: any): number;
only<C>(children: C): C extends any[] ? never : C;
toArray(children: React.ReactNode | React.ReactNode[]): Array<Exclude<React.ReactNode, boolean | null | undefined>>;
}
Maintainer's note: Sync with
{@link
ReactChildren
}
until
{@link
ReactChildren
}
is removed.Children } from "react";
interface ExampleProps {
ExampleProps.children: React.ReactNode
children: React.type React.ReactNode = string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined
Represents all of the things React can render.
Where
{@link
ReactElement
}
only represents JSX, `ReactNode` represents everything that can be rendered.ReactNode;
}
function function Example({ children }: ExampleProps): void
Example({ children: React.ReactNode
children }: ExampleProps) {
const const result: any[]
result = [];
const Children: {
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
forEach<C>(children: C | readonly C[], fn: (child: C, index: number) => void): void;
count(children: any): number;
only<C>(children: C): C extends any[] ? never : C;
toArray(children: React.ReactNode | React.ReactNode[]): Array<Exclude<React.ReactNode, boolean | null | undefined>>;
}
Maintainer's note: Sync with
{@link
ReactChildren
}
until
{@link
ReactChildren
}
is removed.Children.forEach<string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined>(children: string | ... 7 more ... | undefined, fn: (child: string | ... 6 more ... | undefined, index: number) => void): void
forEach(children: React.ReactNode
children, (child: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined
child, index: number
index) => {
const result: any[]
result.Array<any>.push(...items: any[]): number
Appends new elements to the end of an array, and returns the new length of the array.push(child: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined
child);
const result: any[]
result.Array<any>.push(...items: any[]): number
Appends new elements to the end of an array, and returns the new length of the array.push(<JSX.IntrinsicElements.hr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>
hr React.Attributes.key?: React.Key | null | undefined
key={index: number
index} />);
});
// ...
}