no-children-prop
Rule category
Restriction.
What it does
Disallows passing of children as props.
Why is this bad?
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 ExampleProps {
ExampleProps.children: React.ReactNode
children: React.type React.ReactNode = string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined
Represents all of the things React can render.
Where
{@link
ReactElement
}
only represents JSX, `ReactNode` represents everything that can be rendered.ReactNode;
}
function function Example({ children }: ExampleProps): React.JSX.Element
Example({ children: React.ReactNode
children }: ExampleProps) {
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div React.DOMAttributes<HTMLDivElement>.children?: React.ReactNode
children={children: React.ReactNode
children} />;
// - Children should always be actual children, not passed in as a prop.
}
Passing
import React from "react";
interface ExampleProps {
ExampleProps.children: React.ReactNode
children: React.type React.ReactNode = string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined
Represents all of the things React can render.
Where
{@link
ReactElement
}
only represents JSX, `ReactNode` represents everything that can be rendered.ReactNode;
}
function function Example({ children }: ExampleProps): React.JSX.Element
Example({ children: React.ReactNode
children }: ExampleProps) {
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>{children: React.ReactNode
children}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>;
}