> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# void-dom-elements-no-children

[Added in v0.3.0](https://github.com/web-infra-dev/rslint/releases/tag/v0.3.0)
## Configuration


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/void-dom-elements-no-children': 'error',
    },
  },
]);
```

## Rule Details

Prevent void DOM elements (e.g. `<img />`, `<br />`, `<hr />`) from receiving children. Void elements are HTML elements that cannot have any content. Passing children or `dangerouslySetInnerHTML` to these elements is a mistake.

Examples of **incorrect** code for this rule:

```jsx
<br>Children</br>
<img alt="content">Children</img>
<img dangerouslySetInnerHTML={{ __html: 'content' }} />
React.createElement('br', {}, 'children')
React.createElement('br', null, 'children')
```

Examples of **correct** code for this rule:

```jsx
<br />
<img alt="content" />
<div>Children</div>
```

## Limitations

- Detects `<pragma>.createElement(...)` where `<pragma>` defaults to `React` and can be overridden via `settings.react.pragma`. Destructured `createElement` (e.g. `import { createElement } from 'react'`) and `@jsx` comment pragmas are not supported.

## Original Documentation

- [eslint-plugin-react: void-dom-elements-no-children](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/void-dom-elements-no-children.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/void-dom-elements-no-children.js)