Rules
no-children-prop
Disallows passing `children` as a prop.
Full Name in eslint-plugin-react-jsx
react-jsx/no-children-propFull Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-children-propFeatures
🔧
Presets
recommended
recommended-typescript
recommended-type-checked
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>;
}