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

Last updated on April 20, 2018