span is rendered as text and not element in react? [duplicate]

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, stackoverflow.com/questions/34491459/…

Andrii Starusiev
– Andrii Starusiev

2017-09-05 08:39:24 +00:00
Commented Sep 5, 2017 at 8:39 — Andrii Starusiev
– Andrii Starusiev, Commented Sep 5, 2017 at 8:39

Amid · Accepted Answer · 2017-09-05 08:36:29Z

-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 5, 2017 at 8:36

Amid

22.5k6 gold badges63 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

span is rendered as text and not element in react? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related