no-void-elements-with-children
Disallows 'children' in void DOM elements.
Full Name in eslint-plugin-react-dom
react-dom/no-void-elements-with-childrenFull Name in @eslint-react/eslint-plugin
@eslint-react/dom-no-void-elements-with-childrenPresets
dom
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
Self-closing HTML elements (ex: <img />, <br />, <hr />) are collectively known as void DOM elements. React will give you a warning if you try to give these elements children:
Invariant Violation: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
Examples
Adding children or inner HTML to elements
// Problem: Void elements like <br> cannot contain children
<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' } })// Recommended: Use non-void container elements for children or inner HTML
<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' } })Using void elements correctly
Void elements like <img> and <input> cannot contain children. Use attributes such as alt or placeholder to provide descriptive text instead.
// Recommended: Use attributes instead of children for void elements
function UserProfile() {
return (
<>
<img src="/avatar.png" alt="User avatar" />
<input type="text" placeholder="Enter your name" />
<hr />
</>
);
}Versions
Resources
Further Reading
See Also
react-dom/no-dangerously-set-innerhtml-with-children
Disallows DOM elements from usingdangerouslySetInnerHTMLandchildrenat the same time.react-dom/no-dangerously-set-innerhtml
Disallows DOM elements from usingdangerouslySetInnerHTML.