CODEWITHSUNDEEP
javascriptreactjsyoutubeyoutube-data-api
Nirali Joshi
Nirali Joshi

Reputation: 2008

fetch Youtube video dynamically

I am trying to fetch video from you tube channel using react.js

I tried with PHP CURL and i get proper response. Below code display s blank page. Please help.

import $ from 'jquery'; 
import React, { Component } from 'react';;

class iLotIndex extends Component {

constructor(props) {
    super(props);

    this.state = {video: []};
  }

VideoList() {
    return $.getJSON('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
      .then((data) => {
        this.setState({ video : data.results });
      });
  }


  render() {
    this.VideoList().then(function(res){
      this.state = {video: res};
    });
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">
          {this.state.video.map((item, i) =>{
            return(
              <h1>{item.items}</h1>

            )
          })}
        </div>
      </div>
    )
  }
}

Upvotes: 1

Views: 4047

Answers (2)

thinhvo0108
thinhvo0108

Reputation: 2232

Move the this.VideoList() calling into componentDidMount() instead of render():

constructor(props) {
  super(props);

  this.state = {video: []};
  this.VideoList = this.VideoList.bind(this);
}

VideoList() {
  fetch('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
    .then(resp => resp.json())
    .then((resp) => {
      console.log(resp);
      //this.setState({video: resp.results});
      this.setState({video: resp.items});
      console.log(this.state.video);
    });


  //$.getJSON('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
    //.then((data) => {
      //this.setState({ video : data.results });
    //});
}

componentDidMount() {
  this.VideoList();
}

render() {

  return (
    <div id="layout-content" className="layout-content-wrapper">
      <div className="panel-list">
        {this.state.video.map((item, i) =>{
          console.log(item);
          return(
            <h1>{item.items}</h1>

          )
        })}
      </div>
    </div>
  )
}

Please post here some errors in case it doesn't work yet, thanks!

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281686

I suggest you use axios or fetch with react

axios.get('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
  .then((response) => {
    this.setState({video: response.results})
  })
  .catch(function (error) {
    console.log(error);
  });

Also you are mutating the state directly when in the render function which your don't need since you are anyways setting the state. Also one more thing, I don't think you need to get the api response on every render, you can do that in componentWillMount, use setInterval if you want it to be periodic.

import React, { Component } from 'react';;
import axios from 'axios';
class ILotIndex extends Component {

constructor(props) {
    super(props);

    this.state = {video: []};
  }
componentWillMount() {
    setInterval(() => {
         this.VideoList();
    }, 2000)
}
VideoList() {
    axios.get('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
  .then((response) => {
    this.setState({video: response.results});
  })
  .catch(function (error) {
    console.log(error);
  });
  }


  render() {
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">
          {this.state.video.map((item, i) =>{
            return(
              <h1>{item.items}</h1>

            )
          })}
        </div>
      </div>
    )
  }
}

And a major mistake that you did is to define your React component, starting with a lower case character, they should always begin with uppercase otherwise transpiler will try to search them in the already defined tags like div, p, span etc

Upvotes: 1

Related Questions