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 <area />, <br />, and <input /> 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 React from 'react';

export const example1 = <hr>Hello</hr>; // REACT_VOID_ELEMENT_WITH_CHILDREN alarm
export const example2 = <input children='Hello' />; // REACT_VOID_ELEMENT_WITH_CHILDREN alarm
export const example3 = <img dangerouslySetInnerHTML={{ __html: 'Hello' }} />; // REACT_VOID_ELEMENT_WITH_CHILDREN alarm

Compliant Code Example

import React from 'react';

export const example1 = <hr />;
export const example2 = <input />;
export const example3 = <div dangerouslySetInnerHTML={{ __html: 'Hello' }} />;

Version

This rule was introduced in DeepScan 1.5.0-beta.

See

• React Error: hr is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

• React Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

• React Error: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.