span is rendered as text and not element in react?

Question

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?

Check this, https://stackoverflow.com/questions/34491459/split-a-string-of-html-into-an-array-by-particular-tags — Andrii Starusiev, Sep 05 '17 at 08:39

score -2 · Answer 1 · answered Sep 05 '17 at 08:36

-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.

answered Sep 05 '17 at 08:36

Amid

21,508
5
57
54

span is rendered as text and not element in react?

1 Answers1