Printing data HTML with React [duplicate]

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?

james emanon · Accepted Answer · 2016-03-28 20:19:03Z

17

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>

answered Mar 28, 2016 at 20:19

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomek Buszewski Over a year ago

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

james emanon Over a year ago

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.

markthethomas · Accepted Answer · 2016-03-28 20:59:25Z

1

If you're looking to do something like code-snippets, you can just use a string literal, as opposed to dangerouslySetInnerHTML:

var Snippet = React.createClass({
  render: function() {
    return (
      <div>
        {`
        <pre><code>
                  <h4>I am code!</h4>
                </code></pre>
        `}
      </div>
    );
  }
});

ReactDOM.render(
  <Snippet/>,
  document.getElementById('container')
);

answered Mar 28, 2016 at 20:59

markthethomas

4,4413 gold badges29 silver badges40 bronze badges

Collectives™ on Stack Overflow

Printing data HTML with React [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related