no-dangerously-set-innerhtml-with-children

Full Name in eslint-plugin-react-dom

react-dom/no-dangerously-set-innerhtml-with-children

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom/no-dangerously-set-innerhtml-with-children

Features

🔍

Presets

dom
recommended
recommended-typescript
recommended-type-checked

What it does

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

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 MyComponent() {
  return (
    <div dangerouslySetInnerHTML={{ __html: "Hello World" }}>
      <p>Goodbye World</p>
    </div>
  );
}

Passing

import React from "react";
 
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "Hello World" }} />;
}

Implementation

Rule source
Test source