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
jsx
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.
Examples
Passing children as a prop
interface MyComponentProps {
children: React.ReactNode;
}
function MyComponent({ children }: MyComponentProps) {
// Problem: Children should always be actual children, not passed in as a prop.
return <div children={children} />;
}Passing children as nested content
interface MyComponentProps {
children: React.ReactNode;
}
function MyComponent({ children }: MyComponentProps) {
// Recommended: Nest children between opening and closing tags
return <div>{children}</div>;
}