How to render HTML string as real HTML react

December 15, 2022 By sanxbot00

To render an HTML string as real HTML in React, you can use the dangerouslySetInnerHTML property on a React element. This property takes an object with a __html key, which contains the HTML string you want to render.

For example:

const htmlString = '<h1>Hello, World!</h1>';

const MyComponent = () => {
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;

Please note that using the dangerouslySetInnerHTML property can be risky as it can potentially expose your application to cross-site scripting (XSS) attacks. It is recommended to only use this property with trusted HTML strings and to sanitize the input if necessary.