Printing data HTML with React

Question

I have a JSON table with posts. Content is delivered in HTML, and when I try to render it in React:

  return (
    <article>
      <h2><a href={post.link}>{post.title.rendered}</a></h2>
      <div className="post__content">{post.content.rendered}</div>
    </article>
  )

I am getting full HTML markup printed (escaped). What should I do?

Solution

Try using dangerouslySetInnerHTML

<article>
  <h2><a href={post.link}>{post.title.rendered}</a></h2>
  <div className="post__content" dangerouslySetInnerHTML={{__html: post.content.rendered}}></div>
</article>

Comments

[Tomek Buszewski]

I know about this method, but isn't it dangerous? On the other hand, there won't be any user-written posts.

[james emanon]

I've always used it, but I've always had control or knew the origin of the date I was rendering. So, yeah - its a touch choice. My thought outside of this would be to strip all html characters then deal with beautification on your end.