How to use innerHTML in ReactJS

Using innerHTML directly in ReactJS is generally discouraged due to security concerns, primarily because it can expose your application to cross-site scripting (XSS) attacks. However, there are scenarios where you might need to insert HTML content directly into a component. React provides a way to do this safely using the dangerouslySetInnerHTML attribute.

Here's a detailed explanation with code examples on how to use dangerouslySetInnerHTML in ReactJS.

Basic Usage of dangerouslySetInnerHTML

Step 1. Create a Component

Create a React component where you want to use dangerouslySetInnerHTML.

import React from 'react';

const MyComponent = () => {
  const htmlContent = '<p>This is <strong>dangerouslySetInnerHTML</strong> in React.</p>';

  return (
    <div>
      <h1>Using dangerouslySetInnerHTML</h1>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

export default MyComponent;

Step 2. Explanation

In the example above:

1. We define a string htmlContent containing the HTML we want to insert.
2. We use the dangerouslySetInnerHTML attribute on a div element to insert this HTML.
3. The dangerouslySetInnerHTML attribute expects an object with a property __html containing the HTML string.

Example with Component Props

Often, you might want to pass HTML content as props to a component. Here’s how you can handle that:

Step 1. Create a Component that Accepts HTML Content as a Prop

import React from 'react';

const HtmlContent = ({ content }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: content }} />
  );
};

export default HtmlContent;

Step 2. Use the Component and Pass HTML Content

import React from 'react';
import HtmlContent from './HtmlContent';

const App = () => {
  const htmlContent = '<p>This is <em>HTML content</em> passed as a prop.</p>';

  return (
    <div>
      <h1>Passing HTML Content as Props</h1>
      <HtmlContent content={htmlContent} />
    </div>
  );
};

export default App;

Handling Potential XSS Attacks

To mitigate XSS risks, always sanitize the HTML content before using it. You can use libraries like dompurify to sanitize the HTML content.

Step 1. Install dompurify

npm install dompurify

Step 2. Sanitize HTML Content

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

const HtmlContent = ({ content }) => {
  const sanitizedContent = DOMPurify.sanitize(content);

  return (
    <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
  );
};

export default HtmlContent;

Step 3. Use the Component

import React from 'react';
import HtmlContent from './HtmlContent';

const App = () => {
  const htmlContent = '<p>This is <em>sanitized HTML content</em> passed as a prop.</p>';

  return (
    <div>
      <h1>Sanitized HTML Content</h1>
      <HtmlContent content={htmlContent} />
    </div>
  );
};

export default App;

Summary

1. Basic Usage: Use dangerouslySetInnerHTML by passing an object with __html property.
2. Component Props: Create components that accept HTML content as props.
3. Sanitization: Use libraries like DOMPurify to sanitize HTML content and mitigate XSS risks.

By following these practices, you can safely use innerHTML in your React applications while keeping security in mind.