no-children-prop-with-children
Disallows passing 'children' as a prop when children are also passed as nested content.
Full Name in eslint-plugin-react-jsx
react-jsx/no-children-prop-with-childrenFull Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-children-prop-with-childrenFeatures
🔧
Presets
jsx
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
When using JSX, children should be passed either as a prop or as nested content between the opening and closing tags, but not both. Passing children both ways is redundant and can lead to confusion about which children will actually be rendered.
Examples
Passing children both as a prop and as nested content
interface MyComponentProps {
children: React.ReactNode;
}
function MyComponent({ children }: MyComponentProps) {
// Problem: Don't use children prop when element already has nested children
return <div children={children}>{children}</div>;
}// Problem: Don't use children prop when element already has nested children
<Component children="text">text</Component>Passing children only as nested content
interface MyComponentProps {
children: React.ReactNode;
}
function MyComponent({ children }: MyComponentProps) {
// Recommended: Use nested children
return <div>{children}</div>;
}// Recommended: Use nested children
<Component>text</Component>Passing children only as a prop
// OK: Use children prop when no nested children
<Component children="text" />