void-dom-elements-no-children

Keywords: React, JSX, void elements, children, ESLint rule, code quality, LLM-optimized

Prevent void DOM elements from receiving children. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages.

Quick Summary

Rule Details

Void DOM elements like <br>, <hr>, <img>, <input> cannot have children. React ignores them but it's a mistake.

Examples

❌ Incorrect

<br>Some text</br>

<img src="photo.jpg">Caption</img>

<input type="text">Value</input>

<hr children="divider" />

✅ Correct

<br />

<img src="photo.jpg" alt="Photo" />

<input type="text" value={value} />

<hr />

Related Rules

• jsx-no-duplicate-props - Prevent duplicate props