React has a special prop called dangerouslySetInnerHTML that allows you to assign a raw HTML string to the underlying DOM
innerHTML property. Changing innerHTML will replace the element’s child nodes or text content. For this reason,
dangerouslySetInnerHTML should never be used together with component children as they will conflict with each other, both
trying to set the inner content of the same element.
function MyComponent() {
return ( // Noncompliant: don't use children and dangerouslySetInnerHTML at the same time
<div dangerouslySetInnerHTML={{ __html: "HTML" }}>
Children
</div>
);
}
To fix the issue leave either the element’s children or dangerouslySetInnerHTML, but not both.
function MyComponent() {
return (
<div dangerouslySetInnerHTML={{ __html: "HTML" }} />
);
}
