Rules
no-children-prop
Full Name in eslint-plugin-react-x
react-x/no-children-propFull Name in @eslint-react/eslint-plugin
@eslint-react/no-children-propPresets
strict
strict-typescript
strict-type-checked
Description
Disallow passing children as a prop.
Most of the time, children should be actual children, not passed in as a prop.
When using JSX, the children should be nested between the opening and closing tags. When not using JSX, the children should be passed as additional arguments to React.createElement.
Examples
Failing
import React from "react";
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.
}Passing
import React from "react";
interface MyComponentProps {
children: React.ReactNode;
}
function MyComponent({ children }: MyComponentProps) {
return <div>{children}</div>;
}