Rules
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
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.
Common Violations
Invalid
interface MyComponentProps {
children: React.ReactNode;
}
function MyComponent({ children }: MyComponentProps) {
// ❌ Don't use children prop when element already has nested children
return <div children={children}>{children}</div>;
}// ❌ Don't use children prop when element already has nested children
<Component children="text">text</Component>Valid
interface MyComponentProps {
children: React.ReactNode;
}
function MyComponent({ children }: MyComponentProps) {
// ✅ Use nested children
return <div>{children}</div>;
}// ✅ Use nested children
<Component>text</Component>
// ✅ Or use children prop (when no nested children)
<Component children="text" />