React.js render text as HTML

Question

This is how the render code looks now (And I know it's unsafe to do so):

render: function() {
  return (
    <div className="container-fluid pages_container">
      <p dangerouslySetInnerHTML={{__html: this.state.page.body}} />
    </div>
  );
}

The question is how can I render it safely?

So if you know of a method, why not try it? Don't forget to link to the jQuery library. It's a very easy and common mistake for people to attempt to use jQuery and forget to include the library. — NewToJS
– NewToJS, Commented Aug 6, 2015 at 8:33
I've alredy tried it, but somehow it's not working. I guess It's because of my bad syntax. — Fleeck
– Fleeck, Commented Aug 6, 2015 at 8:34
It would be a good idea for you to display your attempts. Some people will use your attempt to debug, correct it and explain why it wouldn't work for you. — NewToJS
– NewToJS, Commented Aug 6, 2015 at 8:36

Vishnu · Accepted Answer · 2017-06-20 04:45:49Z

29

Reference https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

render: function() {
  return (
    <div className="container-fluid pages_container">
      <p dangerouslySetInnerHTML={{__html: marked(this.state.page.body, {sanitize: true})}} />
    </div>
  );
}

jsFiddle

edited Jun 20, 2017 at 4:45

answered Aug 6, 2015 at 8:57

Vishnu

12.4k7 gold badges56 silver badges91 bronze badges

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

Collectives™ on Stack Overflow

React.js render text as HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related