← Back to rules

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

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.

Examples

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 using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/void-dom-elements-no-children": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/void-dom-elements-no-children": "error",
  },
});

CLI

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

Version

This rule was added in v0.2.11.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground