React.js Youtube Data API V3 Video Search Example Using Axios Full Tutorial For Beginners

Welcome folks today in this blog post we will be searching youtube videos using youtube data api v3 in react.js using axios library. All the full source code of the application is shown below.

LIVE DEMO

Get Started

In order to get started you need to make a new react.js project using the below command

npx create-react-app sampleapp

cd sampleapp

npm i axios

And now you will see the below directory structure of the react.js app as shown below

And now first of all you need to make the apis folder and inside it you need to make the Youtube.js file and copy paste the following code

apis/Youtube.js

import axios from "axios";

const KEY = "AIzaSyDNe-EwKY81Imo8_AyAvMBnKbvaBYFqbNs";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: {
    part: "snippet",
    type: "video",
    maxResult: 5,
    key: KEY
  }
});

import axios from "axios";

const KEY = "AIzaSyDNe-EwKY81Imo8_AyAvMBnKbvaBYFqbNs";

export default axios.create({

baseURL: "https://www.googleapis.com/youtube/v3",

params: {

part: "snippet",

type: "video",

maxResult: 5,

key: KEY

}

});

As you can see we are importing the axios library at the top and then you need to replace your own api_key from google cloud console and enable the Youtube Data API V3 and then we are making a get request to youtube api to search for videos and we are passing the maxResult to 5.

And now you need to make the components folder and inside it you need to make the App.js file and copy paste the following code

Components/App.js

import React from "react";
import SearchBar from "./SearchBar";
import Youtube from "../apis/Youtube";
import VideoList from "./VideoList";
import VideoDetail from "./VideoDetail";

class App extends React.Component {

    state = { videos: [], selectedVideo: null };

    componentDidMount(){
        this.onTermSubmit('React JS');
    }

    onTermSubmit = async (term) => {
        const results = await Youtube.get("/search", {
            params: {
            q: term
            },
        });
        this.setState({ 
            videos: results.data.items,
            selectedVideo: results.data.items[0] 
        });
    };

    onVideoSelect = (video) => {
        this.setState({ selectedVideo: video });
    }

    render() {
    return (
        <div className="ui container">
            <SearchBar onSearchCallback={this.onTermSubmit} />
            <div className="ui grid">
                <div className="ui row">
                    <div className="eleven wide column">
                        <VideoDetail video={this.state.selectedVideo}/>
                    </div>
                    <div className="five wide column">
                        <VideoList videos={this.state.videos} onVideoSelect={this.onVideoSelect}/>
                    </div>
                </div>
            </div>
        </div>
    );
    }
}

export default App;

import React from "react";

import SearchBar from "./SearchBar";

import Youtube from "../apis/Youtube";

import VideoList from "./VideoList";

import VideoDetail from "./VideoDetail";

class App extends React.Component {

state = { videos: [], selectedVideo: null };

componentDidMount(){

this.onTermSubmit('React JS');

}

onTermSubmit = async (term) => {

const results = await Youtube.get("/search", {

params: {

q: term

});

this.setState({

videos: results.data.items,

selectedVideo: results.data.items[0]

});

};

onVideoSelect = (video) => {

this.setState({ selectedVideo: video });

}

render() {

return (

</div>

</div>

);

}

export default App;

As you can see we are loading all the components which is used to display the searched videos and we have also the suggested videos section and then we have the searchbar where the user can type anything and based upon that we retrieve the youtube videos and display it as shown below

Now we need to make the SearchBar.js component which will hold the searchbar and copy paste the following code

SearchBar.js

import React from 'react';

class SearchBar extends React.Component{

    state = { term: "" };

    onFormSubmit = (event) => {
        event.preventDefault();
        this.props.onSearchCallback(this.state.term);
    };

    render(){
        return(
            <div className="search-bar ui segment">
                <form className="ui form" onSubmit={this.onFormSubmit} >
                    <div className="field">
                        <label> Video Search </label>
                        <input 
                        type="text" 
                        value={this.state.term}
                        onChange={(e) => this.setState({term: e.target.value})}
                        />
                    </div>
                </form>
            </div>
        );
    }
}

export default SearchBar;

import React from 'react';

class SearchBar extends React.Component{

state = { term: "" };

onFormSubmit = (event) => {

event.preventDefault();

this.props.onSearchCallback(this.state.term);

};

render(){

return(

<label> Video Search </label>

<input

type="text"

value={this.state.term}

onChange={(e) => this.setState({term: e.target.value})}

</div>

</form>

</div>

);

}

export default SearchBar;

As you can see we have the simple input field where we allow the user to search anything and we have binded onchange event listener to capture the text written by the user.

Now we need to make the VideoDetail.js component where we will be embeding the youtube video using the iframe tag and display the title and description of the youtube video as shown below

VideoDetail.js

import React from 'react';

const VideoDetail = ({ video }) => {

    if(!video){
        return <div>Loadng...</div>;
    }

    const videoURL = `https://www.youtube.com/embed/${video.id.videoId}`;

    return (
        <div>
            <div className="ui embed">
                <iframe src={videoURL} title="Video Player"/>
            </div>
            <div className="ui segment">
                <h4 className="ui header">{video.snippet.title}</h4>
                <p>{video.snippet.description}</p>
            </div>
        </div>
    );
};

export default VideoDetail;

import React from 'react';

const VideoDetail = ({ video }) => {

if(!video){

return <div>Loadng...</div>;

}

const videoURL = `https://www.youtube.com/embed/${video.id.videoId}`;

return (

<div>

</div>

<h4 className="ui header">{video.snippet.title}</h4>

<p>{video.snippet.description}</p>

</div>

);

};

export default VideoDetail;

And now we need to make the VideoItem.js file to render a single youtube video inside the player

VideoItem.js

import React from "react";
import "./VideoItem.css";

const VideoItem = ({ video, onVideoSelect }) => {
  return (
    <div onClick={() => onVideoSelect(video)} className="video-item item">
      <img
        className="ui image"
        alt={video.snippet.title}
        src={video.snippet.thumbnails.medium.url}
      />
      <div className="content">
        <div className="header">{video.snippet.title}</div>
      </div>
    </div>
  );
};

export default VideoItem;

import React from "react";

import "./VideoItem.css";

const VideoItem = ({ video, onVideoSelect }) => {

return (

<div onClick={() => onVideoSelect(video)} className="video-item item">

<img

className="ui image"

alt={video.snippet.title}

src={video.snippet.thumbnails.medium.url}

<div className="header">{video.snippet.title}</div>

</div>

);

};

export default VideoItem;

And now you need to make the VideoList.js component where we will be rendering the list of youtube videos using the for loop as shown below

VideoList.js

import React from "react";
import VideoItem from "./VideoItem";

const VideoList = ({ videos, onVideoSelect }) => {
  const renderedList = videos.map((video) => {
    return <VideoItem key={video.id.videoId} video={video} onVideoSelect={onVideoSelect}/>;
  });

  return <div className="ui relaxed divided list">{renderedList}</div>;
};

export default VideoList;

import React from "react";

import VideoItem from "./VideoItem";

const VideoList = ({ videos, onVideoSelect }) => {

const renderedList = videos.map((video) => {

return <VideoItem key={video.id.videoId} video={video} onVideoSelect={onVideoSelect}/>;

});

return <div className="ui relaxed divided list">{renderedList}</div>;

};

export default VideoList;