Don't specify children when using dangerouslySetInnerHTML |
When using 'dangerouslySetInnerHTML' don't specify children elements
CheckId | RCT010103 |
---|---|
TypeName | DangerouslySetInnerHTMLChildrenRule |
Severity | Error |
Type | React component |
When using dangerouslySetInnerHTML don't specify children elements. dangerouslySetInnerHTML replaces the contents of the element with the value of its __html property overwriting the children elements.
Bad practice
const html = "some html";
ReactDOM.render(
<div dangerouslySetInnerHTML={{ __html: html }}>
<Message />
</div>, document.getElementById("container")
);
ReactDOM.render(
<div dangerouslySetInnerHTML={{ __html: html }}>
<Message />
</div>, document.getElementById("container")
);
Good practice
const html = "some html";
ReactDOM.render(
<div dangerouslySetInnerHTML={{ __html: html }} />,
document.getElementById("container")
);
ReactDOM.render(
<div dangerouslySetInnerHTML={{ __html: html }} />,
document.getElementById("container")
);
Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.