Rendering HTML in React

In our previous React tutorial, we have explained how to Create React Select Dropdown List from API. In this tutorial, we will explain How to Render HTML in React.

There might be times when we have HTML content from external sources or WYSIWYG editors or via REST API to render using React. By default, it’s not possible in React due to security reason. It treats all content as string and thus all tags are visible on the page.

So here in this tutorial, we will explain step by step to render raw HTML content in React.

1. Default Behaviour to Render HTML

By default, it’s not allowed render HTML due to security reason to avoid XSS attack. If we pass HTML content, then it will be display as it is with tags.

const htmlContent = `
<div>  
  <div>
    <img src="https://coderszine.com/wp-content/themes/v2/cz.png"/>
  </div>
  <h1>Coderszine React tutorials</h1>  
  <p>Rendering HTML in React Tutorials.</hp>
</div>
`;

const App = () => {
  return (
    <div>
      {htmlContent}
    </div>
  );
};

When we run above code, the default behaviour will display HTML as string with tags.

2. Using dangerouslySetInnerHTML Prop

There are a dangerouslySetInnerHTML property in React that can be used to render HTML strings. The property name called with dangerous because it compromise with security and exposes to XSS attack.

const htmlContent = `
<div>  
  <div>
    <img src="https://coderszine.com/wp-content/themes/v2/cz.png"/>
  </div>
  <h1>Coderszine React tutorials</h1>  
  <p>Rendering HTML in React Tutorials.</hp>
</div>
`;

const App = () => {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }}></div>
    </div>
  );
};

export default App;

The above code with dangerouslySetInnerHTML prop will render HTML content. But remember to always cleanup HTML before rendering to avoid any XSS attach. You can use dompurify or sanitize-html module or any other module to cleanup HTML before rendering.

3. Render HTML using Third Party Parser

We can use third party parser html-react-parser to parse HTML content to render.

We need to install html-react-parser libraray using below command.

npm install html-react-parser --save

As above HTML parser library not automatically sanitizes the HTML code, so we need to use DOMPurify libaray to to sanitize HTML content to avoid XSS attack. We will install DOMPurify library using below command.

npm install dompurify

After installing html parser module and DOMPurify library, we will implement to use parser to render html.

import React from "react";
import DOMPurify from "dompurify";
import parse from "html-react-parser";

const htmlContent = `
<div>  
  <div>
    <img src="https://coderszine.com/wp-content/themes/v2/cz.png"/>
  </div>
  <h1>Coderszine React tutorials</h1>  
  <p>Rendering HTML in React Tutorials.</hp>
</div>
`;

const cleanHTML = DOMPurify.sanitize(htmlContent, {
  USE_PROFILES: { html: true },
});

const App = () => {
  return (
    <div>
      {parse(cleanHTML)}
    </div>
  );
};

export default App;

Above code will first sanitize HTML and then parse to render.

As the dangerouslySetInnerHTML prop render HTML without cleanup, so you can also use DOMPurify libaray with dangerouslySetInnerHTML prop to cleanup HTML before rendering to avoid XSS attack.