How to use innerHTML in React?

The

dangerouslySetInnerHTML

attribute is React's replacement for using

innerHTML

in the browser DOM. Just like

innerHTML

, it is risky to use this attribute considering cross-site scripting (XSS) attacks. You just need to pass a

__html

object as key and HTML text as value.

In this example MyComponent uses

dangerouslySetInnerHTML

attribute for setting HTML markup:

function createMarkup() {
  return { __html: "First · Second" };
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}