DocumentationRulesno-children-in-void-dom-elements

no-children-in-void-dom-elements

Full Name in eslint-plugin-react-dom

react-dom/no-children-in-void-dom-elements

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom/no-children-in-void-dom-elements

Features

🔍

Presets

  • dom
  • recommended
  • recommended-typescript
  • recommended-type-checked

What it does

Prevents the use of children in void DOM elements.

Why is this bad?

Self-closing HTML elements (e.g. <img />, <br />, <hr />) are collectively known as void DOM elements. React will give you a warning if you try to give these children:

Invariant Violation: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

Examples

Failing

<br>Children</br>
<br children="Children" />
<br dangerouslySetInnerHTML={{ __html: 'HTML' }} />
React.createElement('br', undefined, 'Children')
React.createElement('br', { children: 'Children' })
React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } })

Passing

<div>Children</div>
<div children="Children" />
<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />
React.createElement('div', undefined, 'Children')
React.createElement('div', { children: 'Children' })
React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } })
prefer-shorthand-fragmentno-dangerously-set-innerhtml