How to use an oEmbed json response in my React App

I'm trying to embed an oEmbed response in my React app. The Response looks like this.

{
  "version": "1.0",
  "type": "video",
  "title": "Scramble up ur name & I’ll try to guess it😍❤️ #foryoupage #petsoftiktok #aesthetic",
  "author_url": "https://www.tiktok.com/@scout2015",
  "author_name": "Scout & Suki",
  "width": "100%",
  "height": "100%",
  "html": "<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/@scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@scout2015\" href=\"https://www.tiktok.com/@scout2015\">@scout2015</a> <p>Scramble up ur name & I’ll try to guess it😍❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage\">#foryoupage</a> <a title=\"petsoftiktok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/petsoftiktok\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501\">♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>",
  "thumbnail_width": 720,
  "thumbnail_height": 1280,
  "thumbnail_url": "https://p16.muscdn.com/obj/tos-maliva-p-0068/06kv6rfcesljdjr45ukb0000d844090v0200010605",
  "provider_url": "https://www.tiktok.com",
  "provider_name": "TikTok"
}

I would like to simply render this in my react app. Using the html doesn't work. I don't want to have to change anything within the response, as the user will provide a link so there will be many different responses, I'm not just doing this once.

So what is the correct way to use this response in my React app? Thank you.

Solution

It's not very clear in what manner do you wish to embed the response.

if you mean display the JSON on the page:

<div><pre>{JSON.stringify(response, null, 2)}</pre></div>

if you meant rendering the enclosed HTML you can use dangerouslySetInnerHTML:

function createMarkup(html) {
  return {__html: html};
}

function MyComponent() {
  // where response = <your response json>
  return <div dangerouslySetInnerHTML={createMarkup(response.html)} />;
}