org.sonar.l10n.javascript.rules.javascript.S6761.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of javascript-checks Show documentation

There is a newer version: 10.20.0.29356

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.
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" }} />
    );
}

Resources
Documentation

   React Documentation - Passing JSX as children 
   React Documentation - Dangerously setting
  the inner HTML