Avoid using children with dangerouslySetInnerHTML

Docs > Code Analysis > Static Analysis Rules > Avoid using children with dangerouslySetInnerHTML

Cette page n'est pas encore disponible en français, sa traduction est en cours.
Si vous avez des questions ou des retours sur notre projet de traduction actuel, n'hésitez pas à nous contacter.

Metadata

ID: jsx-react/no-danger-with-children

Language: JavaScript

Severity: Warning

Category: Error Prone

Description

If both children and dangerouslySetInnerHTML are set, it’s unclear which one should take precedence. React will throw a warning if both are set. This rule enforces the use of either children or dangerouslySetInnerHTML but not both.

Non-Compliant Code Examples

<div dangerouslySetInnerHTML={{ __html: "HTML" }}>{Children}</div>;
<Hello dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</Hello>;
<Hello dangerouslySetInnerHTML={{ __html: "HTML" }}><Another /></Hello>;
React.createElement("div", { dangerouslySetInnerHTML: { __html: "HTML" } }, "Children");
React.createElement("Hello", { dangerouslySetInnerHTML: { __html: "HTML" } }, "Children");

Compliant Code Examples

<div dangerouslySetInnerHTML={{ __html: "HTML" }} />;
<Hello dangerouslySetInnerHTML={{ __html: "HTML" }} />;
<div>Children</div>;
<Hello>Children</Hello>;
React.createElement("div", { dangerouslySetInnerHTML: { __html: "HTML" } });
React.createElement("Hello", { dangerouslySetInnerHTML: { __html: "HTML" } });
React.createElement("div", {}, "Children");
React.createElement("Hello", {}, "Children");

How to use this rule

1
2
rulesets:
  - jsx-react     # Rules to enforce JavaScript react.

Create a static-analysis.datadog.yml with the content above at the root of your repository
Use our free IDE Plugins or add Code Analysis scans to your CI pipelines
Get feedback on your code

For more information, please read the Code Analysis documentation

VS Code Extension

Identify code vulnerabilities directly in your
VS Code editor

JetBrains Plugin

Identify code vulnerabilities directly in
JetBrains products