react/void-dom-elements-no-children
Disallow children on void DOM elements such as <img /> and <br />
Some HTML elements can never have content: <img>, <br>, <hr>, <input>, <link>, <meta> and a few more. React throws when it renders one of them with children.
The rule reports children between the tags, a children prop and a dangerouslySetInnerHTML prop, in JSX and in React.createElement().
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react/void-dom-elements-no-children" = "error" # or "warn"Examples#
example.jsx4 problems
const field = <input name="email">Email</input>Void DOM element <input /> cannot receive children.;
const photo = <img src={url} children="A photo" />Void DOM element <img /> cannot receive children.;
const rule = <hr dangerouslySetInnerHTML={{ __html: "Section" }} />Void DOM element <hr /> cannot receive children.;
const lineBreak = React.createElement("br", {}, "Next line")Void DOM element <br /> cannot receive children.;example.jsxNo problems
const field = (
<label>
Email
<input name="email" />
</label>
);
const photo = <img src={url} alt="A photo" />;
const lineBreak = React.createElement("br");