1

The following code is to put the json response to a web page as an actual html. The json response is a String.

{this.props.posts && this.props.posts.length > 0 && this.props.posts.map((p) => (
  <div className='blog-post' key={p.id}>
    <div className='blog-post-top-image'>
      <img src={p.image.url} />
    </div>
    <div className='blog-post-content'>
      <h1>{p.title}</h1>
      <p className='blog-post-posted-on'>{p.publishedAt}</p>
      <div className='blog-post-text'>
        <p className='blog-post-text-p'>{p.body}</p>
      </div>
   </div>
  </div>
))}

{p.body} consist of a String of "<p>some text here</p>\n<p>another text...".

How do I display it as a proper html on the page?

El Anonimo
  • 1,759
  • 3
  • 24
  • 38

1 Answers1

1

You can use dangerouslySetInnerHTML as below:

<p dangerouslySetInnerHTML={{__html: p.body}}></p>
Triyugi Narayan Mani
  • 3,039
  • 8
  • 36
  • 56
  • Thank you. Do you by any chance have a usage example for https://github.com/milesj/interweave or https://github.com/remarkablemark/html-react-parser esp the first one cause the other one is not usable inside a component. – El Anonimo Aug 06 '18 at 10:54
  • @ElAnonimo You are welcome but I am sorry. I have not used any of the two. – Triyugi Narayan Mani Aug 06 '18 at 11:20