Convert fetched data into HTML in React

Question

I am fetchin data and one of the data I fetch looks like this

<p><strong>This is my first content and it is supposed to represent my index.</strong></p>

this is an wysiwyg output on a server and while I am trying to bring to my screen, I get it exactly as it is.

Please tell me how I can import this data as html into my page.

Perhaps this will answer your question: https://stackoverflow.com/questions/19266197/reactjs-convert-to-html/27938353#27938353 — Hugo, Mar 21 '19 at 09:33

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

dangerouslySetInnerHTML

from the docs here's an example

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Like the name suggests this is dangerous if you dont have the html properly vetted.

For detail information on this please read the docs here

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 21 '19 at 09:34

Joe Lloyd

19,471
7
53
81

score 1 · Answer 2 · answered Mar 21 '19 at 09:57

You can compile your data in HTML by creating the reference to that element and just set innerHTML property to your fetched data that contains HTML in its value.

This snippet gives you more idea:

 constructor() {
    super();
    // create reference
    this.titleDiv = React.createRef();

    // this can be whatever you get HTML data from
    this.state ={
      testHTML: "<h1>Test HTML Text</h1>"
    }
  }

  componentDidMount() {
    const element = this.titleDiv.current;
    element.innerHTML = this.state.testHTML;
  }

  render() {
    return (
      // define reference for where you want to set HTML
      <div ref={this.titleDiv}></div>
    )
  }

you can deep dive into ref in react.js here: https://reactjs.org/docs/refs-and-the-dom.html

Convert fetched data into HTML in React

2 Answers2

dangerouslySetInnerHTML