How to render a HTML string in React?

To avoid the potential security vulnerabilities (such as XSS attacks) that are present when using dangerouslySetInnerHTML, you can do the following:

First use DOMPurify to clean the HTML.

import DOMPurify from 'dompurify';

let clean = DOMPurify.sanitize(dirtyHtmlString, {USE_PROFILES: {html: true}});

Then it can be rendered using react-render-html as Salman Lone said:

import renderHTML from 'react-render-html';

<div>
   {renderHTML(clean)}
</div>

you can try dangerouslySetInnerHTML with the enclosing tag:

      <div dangerouslySetInnerHTML={{ __html: yourhtml }} />

According to official React docs

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous. For example: 

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

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

Tags:

Reactjs

Recent Posts