Rules
no-void-elements-with-children
Full Name in eslint-plugin-react-dom
react-dom/no-void-elements-with-children
Full Name in @eslint-react/eslint-plugin
@eslint-react/dom/no-void-elements-with-children
Presets
dom
recommended
recommended-typescript
recommended-type-checked
Description
Disallow children
in void DOM elements.
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' } })
Implementation
See Also
no-dangerously-set-innerhtml
Warns when usingdangerouslySetInnerHTML
.no-dangerously-set-innerhtml-with-children
Disallows DOM elements usingchildren
anddangerouslySetInnerHTML
at the same time.