0

I am making a query from an api, the api returns a result snippet like this:

"<span class="searchmatch">Justin</span> Drew <span class="searchmatch">Bieber</span> (/ˈbiːbər/; born March 1, 1994) is a Canadian singer and songwriter. After a talent manager discovered him through his YouTube videos"

when i render it in my component like this:

{this.props.snippet}

it returns a text, but I want to render it as an html element. help?

gpbaculio
  • 4,693
  • 8
  • 42
  • 86
  • 1
    Check this, https://stackoverflow.com/questions/34491459/split-a-string-of-html-into-an-array-by-particular-tags – Andrew Sep 05 '17 at 08:39

1 Answers1

-2

You are most likely looking for dangerouslySetInnerHTML

And render it like this:

<div dangerouslySetInnerHTML={{__html: yourStringFromApi}} />

Note though that this can be quite dangerous and should be avoided if possible.

Amid
  • 20,089
  • 3
  • 52
  • 54