Skip to main content

react/noVoidElementsWithChildren

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

ESLint Equivalent: void-dom-elements-no-children

Examples

Invalid

<br className={'dont-remove-class'}>invalid children</br>

 file.tsx:1 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━

  br is a void element tag and must not have children.

    <br className={'dont-remove-class'}>invalid children</br>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Safe fix

    1  - <br·className={"dont-remove-class"}>
    2  - invalid·children
    3  - </br>
      1+ <br·className={"dont-remove-class"}·/>


<img>invalid children</img>

 file.tsx:1 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━

  img is a void element tag and must not have children.

    <img>invalid children</img>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Safe fix

    1  - <img>
    2  - invalid·children
    3  - </img>
      1+ <img·/>


<hr children={'invalid children'} />

 file.tsx:1 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━

  hr is a void element tag and must not have children.

    <hr children={'invalid children'} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Safe fix

  - <hr·children={"invalid·children"}·/>
  + <hr·/>


<area dangerouslySetInnerHTML={{__html: ''}}></area>

 file.tsx:1 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━

  area is a void element tag and must not have dangerouslySetInnerHTML.

    <area dangerouslySetInnerHTML={{__html: ''}}></area>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Safe fix

    1  - <area·dangerouslySetInnerHTML={{__html:·""}}>
    2  - </area>
      1+ <area·/>


<img dangerouslySetInnerHTML={{__html: ''}} children={'invalid children'}>invalid children</img>

 file.tsx:1 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━━━━

  img is a void element tag and must not have children, or
    dangerouslySetInnerHTML.

    <img dangerouslySetInnerHTML={{__html: ''}} children={'invalid
    children'}>invalid children</img>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Safe fix

    1  - <img·dangerouslySetInnerHTML={{__html:·""}}·
      - children={"invalid·children"}>
    2  - invalid·children
    3  - </img>
      1+ <img·/>


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

 file.tsx:1:28 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━

  img is a void element tag and must not have children.

    React.createElement('img', {children: 'child'})
                                ^^^^^^^^^^^^^^^^^

  Safe fix

  - React.createElement("img",·{children:·"child"})


React.createElement('img', {dangerouslySetInnerHTML: {__html: 'child'}})

 file.tsx:1:28 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━

  img is a void element tag and must not have dangerouslySetInnerHTML.

    React.createElement('img', {dangerouslySetInnerHTML: {__html: 'child'
      }})
    ^^^^

  Safe fix

  - React.createElement("img",·{dangerouslySetInnerHTML:·{__html:·
  - "child"}})


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

 file.tsx:1:20 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━

  img is a void element tag and must not have children.

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

  Safe fix

  - React.createElement("img",·{},·"child")
  + React.createElement("img",·{})


createElement('img', {children: 'child'})

 file.tsx:1:22 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━

  img is a void element tag and must not have children.

    createElement('img', {children: 'child'})
                          ^^^^^^^^^^^^^^^^^

  Safe fix

  - createElement("img",·{children:·"child"})


createElement('img', {dangerouslySetInnerHTML: {__html: 'child'}})

 file.tsx:1:22 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━

  img is a void element tag and must not have dangerouslySetInnerHTML.

    createElement('img', {dangerouslySetInnerHTML: {__html: 'child'}})
                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Safe fix

  - createElement("img",·{dangerouslySetInnerHTML:·{__html:·"child"}})


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

 file.tsx:1:14 lint/react/noVoidElementsWithChildren  FIXABLE  ━━━━━━━━━━━━

  img is a void element tag and must not have children.

    createElement('img', {}, 'child')
                  ^^^^^^^^^^^^^^^^^^

  Safe fix

  - createElement("img",·{},·"child")
  + createElement("img",·{})

Valid

<div>Children</div>
<div children='Children' />
<div dangerouslySetInnerHTML={{ __html: '' }} />
<br className='valid' />
React.createElement('img', {})
React.createElement('div', {dangerouslySetInnerHTML: {__html: 'child'}})
React.createElement('div', {}, 'child')
createElement('img', {})
createElement('div', {dangerouslySetInnerHTML: {__html: 'child'}})
createElement('div', {}, 'child')