Skip to content
You are currently reading docs for v1.x. Go to the latest docs if you are using newer version.

noChildrenProp

Diagnostic Category: lint/correctness/noChildrenProp

Since: v1.0.0

Sources:

Prevent passing of children as props.

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.

<FirstComponent children={'foo'} />
code-block.jsx:1:17 lint/correctness/noChildrenProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Avoid passing children using a prop

> 1 │ <FirstComponent children={‘foo’} />
^^^^^^^^
2 │

The canonical way to pass children in React is to use JSX elements

React.createElement('div', { children: 'foo' });
code-block.js:1:30 lint/correctness/noChildrenProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Avoid passing children using a prop

> 1 │ React.createElement(‘div’, { children: ‘foo’ });
^^^^^^^^
2 │

The canonical way to pass children in React is to use additional arguments to React.createElement

biome.json
{
"linter": {
"rules": {
"correctness": {
"noChildrenProp": "error"
}
}
}
}