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

import { 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

import { 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 use dangerouslySetInnerHTML.