rspec/rules/S6761/javascript/rule.adoc

== 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]