Rules
no-children-only

no-children-only

Rule category

Restriction.

What it does

Prevents usage of Children.only.

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.ReactNodechildren: 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.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx // Typing children type Props = { children: ReactNode } const Component = ({ children }: Props) => <div>{children}</div> <Component>hello</Component> ```@example```tsx // Typing a custom element type Props = { customElement: ReactNode } const Component = ({ customElement }: Props) => <div>{customElement}</div> <Component customElement={<div>hello</div>} /> ```
ReactNode
;
} function function Example({ children }: ExampleProps): voidExample({ children: React.ReactNodechildren }: ExampleProps) { const const element: React.ReactNodeelement =
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
.only<React.ReactNode>(children: React.ReactNode): React.ReactNode extends any[] ? never : React.ReactNodeonly(children: React.ReactNodechildren);
// ... }

Further reading