Lint Rules

noVoidElementsWithChildren (since v0.10.0)

This rule is recommended by Rome.

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

Examples

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 │ 
  
   Suggested 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 │ 
  
   Suggested 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 │ 
  
   Suggested fix: Remove the children.
  
    1 │ React.createElement('img',·{},·'child')
                                 -------