CODEWITHSUNDEEP
reactjswysiwyg
Hypothesis
Hypothesis

Reputation: 1389

Convert fetched data into HTML in React

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.

enter image description here

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

Upvotes: 0

Views: 228

Answers (2)

Dhara Charola
Dhara Charola

Reputation: 352

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

Upvotes: 1

Joe Lloyd
Joe Lloyd

Reputation: 22373

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

Upvotes: 1

Related Questions