Skip to content
Biome
Docs Blog Playground

noChildrenProp (since v1.0.0)

Diagnostic Category: lint/correctness/noChildrenProp

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.

Examples

Section titled Examples

Invalid

Section titled Invalid
<FirstComponent children={'foo'} />
correctness/noChildrenProp.js: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' });
correctness/noChildrenProp.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
Section titled Related links