How to render HTML from database in react?

Question

I am working on making custom webpages with the help of Grapesjs. I want to render the html page in react js which has been been saved by the grapesjs editor in the database. Following is the format in which the data is being saved.

Right now I just able to get the html code in the inspect window, but how can i render it on the page?

import React from "react";
import axios from "axios";
// import {renderWebpage} from "../actions/webpage"

export const Page: React.FC = () => {
  const renderWebpage = axios
    .get("http://localhost:8080/61ea7fd2268f37443ca4d59a")
    .then((response) => {
      console.log("response", response);
      console.log(response.data, "data");
    });

  return <div>demo</div>;
};

score 7 · Answer 1 · edited Jul 14 '23 at 13:52

7

You can do like this.

Note: It does not protect from XSS attacks. In other words, we can say it is not a safe way to do it.

    const App = () => {
      const data = 'lorem <b>ipsum</b>';
    
      return (
        <div
          dangerouslySetInnerHTML={{__html: data}}
        />
      );
    }
    
    export default App;

edited Jul 14 '23 at 13:52

Dmitriy Popov

2,150
3
25
34

answered Feb 03 '22 at 04:54

Govind Kumawat

91
6

Does this protect the site from cross-site scripting (XSS) ? The documentation for dangerouslySetInnerHTML mentions that it is to remind us of it. For example, how do we avoid the app from executing a – Sneha Valabailu Jul 22 '22 at 12:57

Amila Senadheera · Accepted Answer · 2022-02-03T05:08:24.093

You need to set the response.data to a component state using useEffect hook and then render the HTML string using dangerouslySetInnerHTML property.

Try like below.

import React, { useState, useEffect } from "react";
import axios from "axios";
// import {renderWebpage} from "../actions/webpage"
type HTMLData = {
  content: { "mycustom-html": string };
};

export const Page: React.FC = () => {
  const [htmlData, setHtmlData] = useState<HTMLData>({
    content: { "mycustom-html": "<p>demo</p>" }
  });

  const renderWebpage = () => {
    axios
      .get("http://localhost:8080/61ea7fd2268f37443ca4d59a")
      .then((response) => {
        console.log("response", response);
        console.log(response.data, "data");
        setHtmlData(response.data);
      });
  };

  useEffect(() => {
    renderWebpage();
  }, []);

  return (
    <div
      dangerouslySetInnerHTML={{
        __html: htmlData?.content?.["mycustom-html"]
      }}
    />
  );
};

score 0 · Answer 3 · answered Jun 16 '22 at 04:49

0

In my project html is rendering well but how to render mycustom-css in

 <div
  dangerouslySetInnerHTML={{
    __html: htmlData?.content?.["mycustom-html"]
  }}

/>

answered Jun 16 '22 at 04:49

Aadarsh

21
3

score 0 · Answer 4 · answered Aug 11 '23 at 09:40

Using dangerouslySetInnerHTML is not a good and safe idea. Instead, you can use a library called npm i html-to-react. You can use it like this:-

import { Parser } from "html-to-react";


<div>
      {Parser().parse(homeData?.acf.banner_title)}
</div>

How to render HTML from database in react?

4 Answers4