How to Insert HTML into dangerouslySetInnerHTML?

[Uranbold]

Hello,

We got strange question.

We had Rest API and that gives us HTML content but somehow we need to insert 1 div into the Rest API content.

Example:

<div>
<div>Come from API 1</div>
<div>Come from API 2</div>
</div>

<div>
<div>Come from API 1</div>
<div>Our DIV from React Component</div>
<div>Come from API 2</div>
</div>

Thanks.

[brunocrosier]

could you do something like

const foo = encodeURI(`
<div>
<div>Come from API 1</div>
<div>Come from API 2</div>
</div>
`

and then just use decodeURI(foo) afterwards ?

[Uranbold]

Hello,

I mean this .content is come from the Rest API content field.

<div class="content">
<div>Sample content</div>
<div>Sample content 2</div>
</div>

I am trying to insert it into that content to my own component div.

Thanks.

[brunocrosier]

Something like this?

<div className="wrapper"
dangerouslySetInnerHTML={{
          __html: `${contentFromYourAPI}`
        }}
/>

[Uranbold]

Output should something like this ->

a

c

b

``` That C should inserted from my Component :)

Thanks.

[brunocrosier]

Yes, I understand. The answer to your question is this:

<div className="wrapper"
dangerouslySetInnerHTML={{
          __html: `${contentFromYourAPI}`
        }}
/>

just replace ${contentFromYourAPI} with your HTML and it will work