dangerouslySetInnerHTML prop for a React DOM element should be in the form of {__html: ...}

• REACT_BAD_DANGER_FORMAT
• Error
• High
• react

This rule applies when dangerouslySetInnerHTML prop for a React DOM element is specified with an incorrect value.

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.

Therefore, dangerouslySetInnerHTML prop should be in the form of {__html: ...}. Otherwise, React will throw an exception.

Noncompliant Code Example

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

ReactDOM.render(
    <div dangerouslySetInnerHTML={ "myHTML" } />, // REACT_BAD_DANGER_FORMAT alarm because a string value is passed.
    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.5.0-beta.

See

• dangerouslySetInnerHTML

• React Error: props.dangerouslySetInnerHTML must be in the form {__html: ...}. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.