React - Dynamic HTML (dangerouslySetInnerHTML attribute)
Table of Contents
About
How to add dynamically HTML (for instance for when you have converted a markdown document in a HTML string).
Articles Related
Syntax
In an html element, you pass to the dangerouslySetInnerHTML attribute an object with the attribute named __html that holds the HTML string
<element dangerouslySetInnerHTML={ { __html: htmlString } }</element>
Example
with a function component
function DynamicHTML() {
let html = '<h1>Hello World !</h1>';
return <div dangerouslySetInnerHTML={ { __html: html}} />;
}
- The standard mandatory “root” DOM node (placeholder for React DOM manipulation)
<div id="root"></div>
- Rendering of the DynamicHTML component in the root div defined below
ReactDOM.render(
<DynamicHTML/>,
document.getElementById('root')
);
- Output: