render html string as real html in a react component

First install the package by npm i --save react-render-html I could not get npm build to work with react-html-parser. However, in my case, I was able to successfully make use of https://reactjs.org/docs/fragments.html. I had a requirement to show few html unicode characters , but they should not be directly embedded in the JSX. Within the JSX, it had to be picked from the Component's state. Component code snippet is given below : You can also use parseReactHTMLComponent from Jumper Package. Just look at it, it's easy and you don't need to use JSX syntax.

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

​
Object {
   $$typeof: [object Symbol] {},
   _owner: null,
   key: null,
   props: Object {
      children: "something",
      style: "color:red;"
   },
   ref: null,
   type: "h1"
}

yarn add react - html - parser

import ReactHtmlParser from 'react-html-parser'; 

<div> { ReactHtmlParser (html_string) } </div>

In this tutorial we will see how to render HTML string in a React component. Most of the rich text editor for react uses html for the formatting. So the data in the text editor is saved as string. by using dangerouslySetInnerHTML, entire html in the string is preserved. Other alternative would be to use a html-react-parser library. We cannot directly render this string, html tags will also get treated as raw string.

"<p>some dummy <span>data</span></p>"

<div dangerouslySetInnerHTML={{ __html: "<p>some data </p>" }} />

HTML parsing is a crucial task that involves rendering HTML content based on various requirements, like using the value coming from the state object. In the above example, there is one <div> section in which, by using the state string, the HTML mark-up is parsed. You have learned a simple approach to parse the state values using dangerouslySetInnerHTML. You can also use third-party libraries to get the same functionality. There are several libraries available that can parse these values:

1constructor() {
2    super();
3    this.state = {
4      myContent: `<div>
5          <table border="3">
6            <tr>
7              <td>This is first column</td>
8              <td>This is second column</td>
9            </tr>
10            <tr>
11              <td>This is first column</td>
12              <td>This is second column</td>
13            </tr>
14            <tr>
15              <td>This is first column</td>
16              <td>This is second column</td>
17            </tr>
18          </table>
19      </div>`
20    };
21}

1render() {
2    return (
3      <div>
4        <span>Render HTML using state string value :</span>
5        <br />
6        <br />
7        <div dangerouslySetInnerHTML={{ __html: this.state.myContent }} />
8      </div>
9    );
10}

1n pm install react - html - parser

1render() {
2    return (
3      <div>
4        <span>Render HTML using third party library :</span>
5        <br />
6        <br />
7        <div>{ReactHtmlParser(this.state.myContent)}</div>
8      </div>
9    );
10}

If we try to use JSX curly brace syntax { } to render an html string, react will treated it as a plain text (to prevent from the cross-site scripting attacks). In this tutorial, we are going to learn about how to render the html string as real dom elements in React app. Similarly, you can also use the html-react-parser library to render the html string. In this demo, we are going to learn about how to rotate an image continuously using the css animations.

import React from "react";

export default function App() {
  const htmlString = "<h1>Hello World</h1>";
  return <div>{htmlString}</div>;
}

import React from "react";

export default function App() {
  const htmlString = "<h1>Hello World</h1>";
  return <div dangerouslySetInnerHTML={{ __html: htmlString }}>         </div>;
}

import React from "react";
import parse from "html-react-parser";
export default function App() {
  const htmlString = "<h1>Hello World</h1>";

  return <div>{parse(htmlString)}</div>;}

When the updates in the React element take place, the re-rendering of the user interface takes place automatically. The React engineers arrange the codes in a manner that arranges themselves according to the updates. The rendering components do not function according to the user as these are an integral part of React Component. The complete React lifecycle functions with several application stages when the instantiation of React Component takes place. When the rendering takes place for the second time, the updated state is known as the re-rendering state of React. Here the React elements re-render with an automated approach when any props or state vary their position or function. Hooks is the new functionality which has been introduced in React. It permits you to use state, and the other reacts Features without writing a class. Hooks are functions that “hook into” React state and the lifecycle features from the components of the function.

Hi there!" }} />

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:Red;">Hello World</h1>'
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Object {
   $$typeof: [object Symbol] {},
   _owner: null,
   key: null,
   props: Object {
      children: "Hello World",
      style: "color:Red;"
   },
   ref: null,
   type: "h1"
}

Step 1: Add a DOM Container to the HTML. First, open the HTML page you want to edit. Step 2: Add the Script Tags. Next, add three <script> tags to the HTML page right before the closing </body> tag: Step 3: Create a React Component. Create a file called like_button.js next to your HTML page. JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

import React from 'react';
import { Markup } from 'interweave';
const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"
<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave

npm install html - react - parser

If you want to include static html in ReactJS. You need to use html-loader plugin if you are using webpack to serve your react code. That is it. Now you can use static html files to load your html files in react. To render the html string in react, we can use the dangerouslySetInnerHTML attribute which is a react version of dom innerHTML property. The term dangerously is used here to notify you that it will be vulnerable to cross-site scripting attacks (XSS).13-Aug-2020 Using react-native-render-html This one is another package you can add to your React Native project for displaying HTML content. It is introduced as an iOS/Android pure javascript react-native component that renders your HTML into 100% native views.15-Mar-2022

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

npm install html - react - parser

React renders HTML to the web page by using a function called ReactDOM.render(). The ReactDOM.render() function takes two arguments, HTML code and an HTML element. You'll notice a single <div> in the body of this file. This is where our React application will be rendered. The purpose of the function is to display the specified HTML code inside the specified HTML element.

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

<body>
   <div id="root"></div>
</body>

const myelement = (
<table>
   <tr>
      <th>Name</th>
   </tr>
   <tr>
      <td>John</td>
   </tr>
   <tr>
      <td>Elsa</td>
   </tr>
</table>
);

ReactDOM.render(myelement, document.getElementById('root'));

ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));