How to render HTML in React?

gaurav

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>
        )
    }
}
user image Write your Answer
1 Answers
User Image Devsheet

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>
        )
    }
}
🤔 Related discussions you may be interested in
User image Gaurav Sharma @gaurav I love to program cool stuffs.
Ask question now
Never leave your website again in search of code snippets by installing our chrome extension.
Install Chrome Extension
Generating new answer. Please wait...