Void elements should neither have children nor dangerouslySetInnerHTML
prop
- REACT_VOID_ELEMENT_WITH_CHILDREN
- Error
- High
- react
This rule applies when void elements have either children or dangerouslySetInnerHTML
prop.
HTML elements such as <input />
, <img />
, and <br />
are void elements which are only self-closing without any content.
Therefore, React will throw an exception if you set either children or dangerouslySetInnerHTML
prop for a void element.
Noncompliant Code Example
View with compliant examples side by sideimport { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<>
<input>Hello</input> {/* REACT_VOID_ELEMENT_WITH_CHILDREN alarm */}
<img dangerouslySetInnerHTML={{ __html: 'Hello' }} /> {/* REACT_VOID_ELEMENT_WITH_CHILDREN alarm */}
</>
);
Compliant Code Example
View with noncompliant examples side by sideimport { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<>
<input defaultValue="Hello" />
<div dangerouslySetInnerHTML={{ __html: 'Hello' }} />
</>
);
Version
This rule was introduced in DeepScan 1.5.0-beta.
See
React Error: input is a void element tag and must neither have
children
nor usedangerouslySetInnerHTML
.