0

I have data which includes html markup like so:

{
  "data" : 
   [
      {"id": 1, "content": "I am <b>important content!</b>"}
   ]
}

When mapping out the data for rendering .....

data.map(function(item, index){
  <div key={ index }>{ item.content }</div>
}

It produces the following VISUAL output:

I am <b>important content!</b>

What I really wanted is ....

I am important content!

How to I make sure markup is interpreted correctly and not literally when I iterate through a mapping of data which includes HTML markup?

Many Thanks

UPDATE:

Arsh offered a solution and it works, and I thank him, but it leads me to another conundrum. This works ...

  <div dangerouslySetInnerHTML={{__html: data.content}} />

Since I have no idea if the user will include markup in content he/she provides, does that mean this is the cleanest way? I have to include this snippet with every blessed variable I map to when preparing to render content the user provides?

  • similar to this: http://stackoverflow.com/questions/19266197/reactjs-convert-to-html – Arsh Singh Oct 22 '15 at 16:33
  • if you want to render a string thats how you do it. – John Ruddell Oct 22 '15 at 16:51
  • 2
    If the content is coming from a user, yes, you need to user `dangerouslySetInnerHTML` to render the html through a component, and you really should run the content through a HTML sanitizer ([example](https://github.com/punkave/sanitize-html)) before doing so. – rossta Oct 22 '15 at 17:04

0 Answers0