32 lines
1.3 KiB
Plaintext
32 lines
1.3 KiB
Plaintext
== Why is this an issue?
|
|
|
|
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.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
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.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
function MyComponent() {
|
|
return (
|
|
<div dangerouslySetInnerHTML={{ __html: "HTML" }} />
|
|
);
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* React Documentation - https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children[Passing JSX as children]
|
|
* React Documentation - https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html[Dangerously setting the inner HTML]
|