noVoidElementsWithChildren
Summary
Section titled 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:
Description
Section titled DescriptionThis rules prevents void elements (AKA self-closing elements) from having children.
Examples
Section titled ExamplesInvalid
Section titled 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’)
│ -------
How to configure
Section titled How to configure{ "linter": { "rules": { "correctness": { "noVoidElementsWithChildren": "error" } } }}