How to Render HTML String as Real Html

How to render HTML string as real HTML?

Check if the text you're trying to append to the node is not escaped like this:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

Instead of this:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

if is escaped you should convert it from your server-side.

The node is text because is escaped

The node is a dom node because isn't escaped

How to render html tags as html tags instead of string if they are coming from an array in React Component?

You can use dangerouslySetInnerHTML(question) inside your map function instead of the <div>{question}</div> inside the render to get the desired behavior, but please be cautious while using it. It can lead to unwanted security risk (hence the name) like XSS.

More information: https://reactjs.org/docs/dom-elements.html

ReactJS convert HTML string to JSX

By default, React escapes the HTML to prevent XSS (Cross-site scripting). If you really want to render HTML, you can use the dangerouslySetInnerHTML property:

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

React forces this intentionally-cumbersome syntax so that you don't accidentally render text as HTML and introduce XSS bugs.

How to render HTML in string with Javascript?

You can render HTML using document.write()

document.write('<html><body><h2>HTML</h2></body></html>');

But to append existing HTML string, you need to get the id of the node/tag under which you want to insert your HTML string.

There are two ways by which you can possibly achieve this:

Using DOM -

var tag_id = document.getElementById('tagid');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('html string'));

Using innerHTML -

var tag_id = document.getElementById('tagid');
tag_id.innerHTML = 'HTML string';

How render a string as HTML in React

See dangerouslySetInnerHTML

 render() {
        return (
           <div>
            {this.state.loading ? <p>Loading..</p> : 
              <div dangerouslySetInnerHTML={{__html:this.state.data.description.en}}></div>
            }
          </div>
        );
    }

How to render a HTML string in React?

you can try dangerouslySetInnerHTML with the enclosing tag:

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

How to render HTML from database in react?

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"]
      }}
    />
  );
};

How to Render HTML String as Real Html