How do I display iframes of videos from vimeo player in React?

Question

I have an example where I access all the videos of a vimeo channel and that works, but when I try to list all the videos as iframes of the vimeo player it just returns the iframe html code. Here is what I have:

import React, { Component } from 'react'; import axios from 'axios';

    const CLIENT_IDENTIFIER = "**********";
    const CLIENT_SECRET = "***********";


            class Apicall extends Component {

              state = {
                  vimeo: []
              };    

             async getVideosForChannel(access_token) {
            const { data } = await axios.get(
              "https://api.vimeo.com/channels/180097/videos",
               {
                  headers: {
                    Authorization: `Bearer ${access_token}`
                  }
               }
            );

          this.setState({ vimeo: data.data });
      }


         async componentDidMount() {
            if (!CLIENT_IDENTIFIER || !CLIENT_SECRET) {
           return alert("Please provide a CLIENT_IDENTIFIER and CLIENT_SECRET");
            }

         try {
            const { data } = await axios.post(
                 "https://api.vimeo.com/oauth/authorize/client",
              { grant_type: "client_credentials" },
            {
            auth: {
               username: CLIENT_IDENTIFIER,
               password: CLIENT_SECRET
             }
           }
          );

      this.getVideosForChannel(data.access_token);
    } catch (error) {
      if (error.response.status === 429) {
        alert(
          "The Vimeo api has received too many requests, please try again in an hour or so"
        );
      }
    }
  }





render() {
    return (
         <div className="container">
           <h1></h1>
           <ul>
            {this.state.vimeo.map(({ resource_key, embed, pictures}) => (
                <li key={resource_key}>
                    {embed.html}
                </li>
            ))}
           </ul>
         </div>
    );
   }
 }

   export default Apicall;

The following code results in this being output to the screen:

<iframe src="https://player.vimeo.com/video/28028960?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=132884" width="640" height="360" frameborder="0" title="Gasta&ccedil;&atilde;o TV: Link&#039;s Death - Dorkly Bits (LEGENDADO)" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

What am I doing wrong here?

Answer 1

You might need to call dangerouslySetInnerHTML to stop react treating the html as a string

<li
  key={resource_key}
  dangerouslySetInnerHTML={{__html: embed.html}}
/>