Why Rendering HTML in React Matters

React is a powerful JavaScript library for building UIs, but sometimes you need to render raw HTML content, such as:

• Loading blog posts from a CMS

• Injecting rich content from an API

• Embedding custom HTML into components

However, React escapes HTML by default to prevent XSS attacks. So if you try to render a string like "<b>Hello</b>", React will treat it as plain text.

This article will teach you how to safely and effectively render raw HTML in React, when to use it, and what pitfalls to avoid.

React’s Default Behavior

React treats strings as plain text in JSX to prevent cross-site scripting (XSS). Here's what happens if you try to render a string of HTML directly:

const htmlString = "<b>Hello, React</b>";

function App() {
  return <div>{htmlString}</div>; // Output: <b>Hello, React</b> as plain text, not bold
}

Expected? ❌ Yes

Useful? ❌ No

✅ Method 1: Rendering HTML with dangerouslySetInnerHTML

React offers a built-in method to inject raw HTML, but it's called dangerouslySetInnerHTML for a reason—use it with caution.

Syntax:

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

Example:

const htmlString = "<strong>Hello, React!</strong>";

function App() {
  return (
    <div>
      <h2>Raw HTML Rendering</h2>
      <div dangerouslySetInnerHTML={{ __html: htmlString }} />
    </div>
  );
}

⚠️ Important:

• This method skips React’s DOM sanitation.

• You must sanitize external HTML content to avoid XSS.

✅ Method 2: Using a Library (e.g., DOMPurify)

To render user-generated or dynamic content safely, use a sanitizing library like DOMPurify.

Installation:

npm install dompurify

Usage:

import DOMPurify from 'dompurify';

const unsafeHtml = "<img src=x onerror=alert(1)>Safe <strong>HTML</strong>";
const safeHtml = DOMPurify.sanitize(unsafeHtml);

function App() {
  return <div dangerouslySetInnerHTML={{ __html: safeHtml }} />;
}

✅ Benefits:

• Sanitizes scripts and malicious attributes

• Great for content from CMS or API

✅ Method 3: Rendering Static HTML with JSX

For predefined HTML content, use JSX syntax directly, which is safe and clean.

function App() {
  return (
    <div>
      <h1>JSX HTML</h1>
      <p>This is <strong>bold</strong> and <em>italic</em>.</p>
    </div>
  );
}

This method is ideal when the HTML is known at build time.

Complete Functional Code Example

import React from 'react';
import DOMPurify from 'dompurify';

const rawHtml = `
  <h3>Welcome to <i>StudyZone4U</i></h3>
  <p>This content includes <strong>bold</strong> text and user-defined HTML.</p>
  <script>alert('XSS')</script>
`;

const App = () => {
  // Sanitize HTML before rendering
  const sanitizedHtml = DOMPurify.sanitize(rawHtml);

  return (
    <div style={{ padding: 20 }}>
      <h2>Render HTML in React</h2>
      <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
    </div>
  );
};

export default App;

⚠️ Tips & Common Pitfalls

✅ Best Practices

• ✅ Always sanitize dynamic or user-provided HTML before rendering.

• ✅ Use dangerouslySetInnerHTML only when absolutely necessary.

• ✅ Prefer JSX for known or static HTML content.

• ✅ Install CSP headers for additional security in production apps.

❌ Common Mistakes

• ❌ Rendering raw HTML without sanitization

• ❌ Forgetting that React escapes content by default

• ❌ Using dangerouslySetInnerHTML with data from untrusted sources

• ❌ Overusing raw HTML instead of leveraging reusable React components

Comparison Table

Conclusion: Use HTML Rendering Sparingly and Securely

Rendering HTML in React is powerful—but with power comes responsibility. Avoid rendering raw HTML unless it’s truly required, and when you do, sanitize it thoroughly.