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 { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <div dangerouslySetInnerHTML={"myHTML"} /> // REACT_BAD_DANGER_FORMAT alarm because a string value is passed.
);

Compliant Code Example

import { createRoot } from 'react-dom/client';

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

Version

This rule was introduced in DeepScan 1.5.0-beta.

See

• Dangerously Setting the Inner HTML

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