Chrome Extension

How to render HTML in React?

I am trying to append html in my react app but when I place my variable like this {this.state.htmlStr} it shows whole html string along with HTML tags as output on the web page. Is there a direct way in react to render HTML or any package that can be useful.

The code I am using is as below

import React from 'react';


class AboutPage extends React.Component {
    constructor() {
        super();
        this.state = {
            htmlStr = '<p>Hello World</p>'
        }
    }


    render() {
        return (
            <div>{this.state.htmlStr}</div>
        )
    }
}
1 Answers

The simplest way to do that is by using 'react-render-html' package. You can install this package by below command

npm install react-render-html

After installing the package you can use this in your code to render HTML

import React from 'react';
import renderHTML from 'react-render-html';



class AboutPage extends React.Component {
    constructor() {
        super();
        this.state = {
            htmlStr = '<p>Hello World</p>'
        }
    }


    render() {
        return (
            <div>{renderHTML(this.state.htmlStr)}</div>
        )
    }
}
Never leave your website again in search of code snippets by installing our chrome extension.