noVoidElementsWithChildren (since v1.0.0)
Diagnostic Category: lint/correctness/noVoidElementsWithChildren
Sources:
- Same as:
react/void-dom-elements-no-children
This rules prevents void elements (AKA self-closing elements) from having children.
Examples
Section titled ExamplesInvalid
Section titled Invalid<br>invalid child</br>correctness/noVoidElementsWithChildren.js: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"} />correctness/noVoidElementsWithChildren.js: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')correctness/noVoidElementsWithChildren.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')
│ -------