React not turning HTML string from JSON into text

Question

I am having a problem with React.js and the way it deals with text stored in variable.

Here is how it would look like using DOM:

let text = "Must credit to &quot;https://indepthguide.com/&quot; not Flickr.\nCopy Link Address: <a href=\"https://indepthguide.com/\" rel=\"nofollow\">indepthguide.com/</a>"

document.getElementById("root").innerHTML = text;

<p id="root"></p>

This is how it looks like in React.js.

var text = "Must credit to &quot;https://indepthguide.com/&quot; not Flickr.\nCopy Link Address: <a href=\"https://indepthguide.com/\" rel=\"nofollow\">indepthguide.com/</a>";

class Text extends React.Component {
  render() {
    return <h3 >{
      text
    } < /h3>;
  }
}


ReactDOM.render( <
  Text / > ,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

I have tried new DOMParser(); but with no success as it started throwing errors and i am unsure how to deal with it. I really don't know how to do it, tried doing it for very long now :D.

That's one of many reasons why JSX sucks. shripadk.github.io/react/docs/jsx-gotchas.html — connexo
– connexo, Commented Mar 11, 2018 at 15:50

Yozi · Accepted Answer · 2018-03-11 15:50:22Z

7

By default, React does not allow create tags from string variables because this is too dangerous. You could use dangerouslysetinnerhtml if it is rly necessary. Please read documentation by this link https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

answered Mar 11, 2018 at 15:50

Yozi

12.9k1 gold badge27 silver badges26 bronze badges

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

2 Comments

Saem Over a year ago

Could you give me an example of how to use it?

Yozi Over a year ago

@saem Replace <h3 >{ text } < /h3> with <h3 dangerouslySetInnerHTML={{__html: text}} >< /h3>. Notice that there is __html also.

Community · Accepted Answer · 2020-06-20 09:12:55Z

As a last resort, you always have the ability to insert raw HTML.

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

https://shripadk.github.io/react/docs/jsx-gotchas.html

var text = "Must credit to &quot;https://indepthguide.com/&quot; not Flickr.\nCopy Link Address: <a href=\"https://indepthguide.com/\" rel=\"nofollow\">indepthguide.com/</a>";

class Text extends React.Component {
  render() {
    return <h3 dangerouslySetInnerHTML={{__html:text}} />
  }
}

ReactDOM.render( <
  Text / > ,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Mike Kor · Accepted Answer · 2018-03-11 16:07:13Z

0

To all other answers it's good to add that you should protect such parts from script injection attacks. The library like DomPurify should help you with that.

answered Mar 11, 2018 at 16:07

Mike Kor

8765 silver badges14 bronze badges

Comments

Anand Deep Singh · Accepted Answer · 2018-12-12 14:33:20Z

0

There is another plugin which helps HTML tags to render on the page.

https://www.npmjs.com/package/react-html-parser

In my opinion, it is a much easier way as compare to dangerouslySet InnerHTML.

answered Dec 12, 2018 at 14:33

Anand Deep Singh

2,6283 gold badges27 silver badges29 bronze badges

Collectives™ on Stack Overflow

React not turning HTML string from JSON into text

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related