noVoidElementsWithChildren (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/correctness/noVoidElementsWithChildren
This rule is recommended, meaning it 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
- Same as react-dom/no-void-elements-with-children
- Same as @eslint-react/dom-no-void-elements-with-children

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noVoidElementsWithChildren": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow children on HTML void elements.

HTML void elements, such as <img> and <br>, cannot contain child content or use the children and dangerouslySetInnerHTML properties. Unlike ordinary JSX elements, a void element cannot have a closing tag.

Examples

Invalid

1
<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>
      │    --------------- --

1
<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"}·/>
      │                      ------------------------

1
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");
      │                                -------

Valid

1
<img alt="some text" />

1
React.createElement("img", { alt: "some text" });