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

✅ This rule is turned on by default.

What it does

Disallow void DOM elements (e.g. <img />, <br />) from receiving children.

Why is this bad?

There are some HTML elements that are only self-closing (e.g. img, br, hr). These are collectively known as void DOM elements. This rule checks that children are not passed to void DOM elements.

Example

Examples of incorrect code for this rule:

<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' } })

Examples of correct code for this rule:

<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' } })

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/void-dom-elements-no-children

Config (.oxlintrc.json)

{
  "rules": {
    "react/void-dom-elements-no-children": "error"
  }
}

References

• Rule Source