When using dangerouslySetInnerHTML prop for a React DOM element, children should not be specified

• REACT_BAD_DANGER_WITH_CHILDREN
• Error
• High
• react

This rule applies when children are specified also when using dangerouslySetInnerHTML prop for a React DOM element.

dangerouslySetInnerHTML prop is provided as React's replacement for using innerHTML property of DOM element. It replaces children of a React DOM element with the value of its __html property.

So, React will throw an exception if you specify children of the React DOM element which already has dangerouslySetInnerHTML prop. You should use either the prop or React element when defining the children.

Noncompliant Code Example

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div dangerouslySetInnerHTML={{ __html: "myHTML" }}>
        <Children /> {/* REACT_BAD_DANGER_WITH_CHILDREN alarm */}
    </div>, document.getElementById("root")
);

Compliant Code Example

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div dangerouslySetInnerHTML={{ __html: "myHTML" }} />,
    document.getElementById("root")
);

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See

• dangerouslySetInnerHTML

• React Error: Can only set one of children or props.dangerouslySetInnerHTML.