no-dangerously-set-innerhtml-with-children

Rule category

Correctness.

What it does

Disallows DOM element using children and dangerouslySetInnerHTML at the same time.

Why is this bad?

When using dangerouslySetInnerHTML, the content of the DOM element is set from the __html property. The content of the DOM element is completely replaced, so the children will not be rendered as expected.

Examples

Failing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.DOMAttributes<HTMLDivElement>.dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
} | undefined
dangerouslySetInnerHTML={{ __html: string | TrustedHTML__html: "Hello World" }}>
      <JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>Goodbye World</JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

Passing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.DOMAttributes<HTMLDivElement>.dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
} | undefined
dangerouslySetInnerHTML={{ __html: string | TrustedHTML__html: "Hello World" }} />;
}

dom/no-dangerously-set-innerhtml dom/no-find-dom-node