Avoid using children with dangerouslySetInnerHTML

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

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

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");