Render saved HTML string in Firestore in React

Question

I have some strings stored in Firestore as:

item1: {
    content: '<p>Hi</p>'
}
item2: {
    content: '<p>Hi 2</p>'
}

When I use the following render function in my React component, it is printing out the paragraph tags (and any other HTML):

render() {
  const { items } = this.state

  this.items = items.map(function(item, key) {
    <li key={key}>{item['content']}</li>
  })

  return (
    <ul>
      {this.items}
    </ul>
  )
}

How to fix? Any way to do this without dangerouslySetInnerHtml?

It seems dangerous! The item content is user-generated, so does that make the app vulnerable? — user2521295
– user2521295, Commented Nov 25, 2019 at 19:27
it depends on where your content comes from, I think it is the most common way to insert html to your react code. — duc mai
– duc mai, Commented Nov 25, 2019 at 19:31
Users are inputting the HTML content in the app, then this component is printing it out somewhere else. I've heard that dangerouslySetInnerHtml should be avoided if possible, so seeing if this would be a case where it would make sense to use it. — user2521295
– user2521295, Commented Nov 25, 2019 at 19:52

user2521295 · Accepted Answer · 2019-11-25 20:07:13Z

1

Ended up using react-html-parser package for this:

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

answered Nov 25, 2019 at 20:07

user2521295

9212 gold badges12 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Render saved HTML string in Firestore in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related