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.Element
Example() {
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.Element
Example() {
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" }} />;
}