Rules

no-children-prop

Disallows passing `children` as a prop.

Full Name in eslint-plugin-react-x

react-x/no-children-prop

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-prop

Presets

strict strict-typescript strict-type-checked

Rule Details

Most of the time, children should be actual children, not passed in as a prop.

When using JSX, children should be nested between the opening and closing tags. When not using JSX, children should be passed as additional arguments to React.createElement.

Common Violations

Invalid

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  return <div children={children} />;
  //          ^^^ Children should always be actual children, not passed in as a prop.
}

Valid

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  return <div>{children}</div>;
}

Resources

no-children-only

Disallows the use of `Children.only` from the `react` package.

no-children-to-array

Disallows the use of `Children.toArray` from the `react` package.