noVoidElementsWithChildren

JSX and TSX

Summary

• Rule available since: v1.0.0
• Diagnostic Category: lint/correctness/noVoidElementsWithChildren
• This rule is recommended, which means is enabled by default.
• This rule has an unsafe fix.
• The default severity of this rule is error.
• Sources:
  • Same as react/void-dom-elements-no-children

How to configure

biome.json

{
  "linter": {
    "rules": {
      "correctness": {
        "noVoidElementsWithChildren": "error"
      }
    }
  }
}

Description

This rules prevents void elements (AKA self-closing elements) from having children.

Examples

Invalid

<br>invalid child</br>

code-block.jsx:1:1 lint/correctness/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ br is a void element tag and must not have children.
  
  > 1 │ <br>invalid child</br>
      │ ^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the children.
  
    1 │ <br>invalid·child</br>
      │    --------------- -- 

<img alt="some text" children={"some child"} />

code-block.jsx:1:1 lint/correctness/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ img is a void element tag and must not have children.
  
  > 1 │ <img alt=“some text” children={“some child”} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the children.
  
    1 │ <img·alt=“some·text”·children={“some·child”}·/>
      │                      ------------------------  

React.createElement('img', {}, 'child')

code-block.js:1:1 lint/correctness/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ img is a void element tag and must not have children.
  
  > 1 │ React.createElement(‘img’, {}, ‘child’)
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the children.
  
    1 │ React.createElement(‘img’,·{},·‘child’)
      │                                ------- 

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases