React.js Youtube Data API V3 Search Videos Autocomplete by Keyword Using Functional Components Full Example For Beginners

React.js Youtube Data API V3 Search Videos Autocomplete by Keyword Using Functional Components Full Example For Beginners



Welcome folks today in this blog post we will be building a youtube search autocomplete videos using youtube data api v3 in react.js using functional components. All the full source code of the application is given below.



Live Demo



React.js Youtube Search Videos By Keyword



Get Started



In order to get started we need to create a brand new github repository as shown below  to initialize a new react.js project



A React implementation of youtube search videos app using youtube data api.




And also you can clone the github repository as shown below


git clone


cd react-youtube-search-videos


npm install


npm start


The directory structure will look like this as shown below



Now just go to developers console and create the api key for your application as shown below



Now store the above api key and just replace the api_key inside the below code

See also  React.js Youtube Data API V3 Video Search Example Using Axios Full Tutorial For Beginners (2020)


import debounce from 'lodash.debounce';
import React, { Component } from 'react';
import './App.css';
import SearchBar from './components/SearchBar';
import VideoDetail from './components/VideoDetail';
import VideoList from './components/VideoList';
import YTSearch from 'youtube-api-search';
import Footer from './components/Footer';

const REACT_APP_API_KEY = '#####APIKEY######';

class App extends Component {
    constructor(props) {

        this.state = {
            videos: [], // holds 5 videos fetched from API
            selectedVideo: null // selected video is null, default set below ln:28

        this.videoSearch('reactjs'); // default search term

    // function for search term
    videoSearch(term) {
                key: REACT_APP_API_KEY,
                term: term
            videos => {
                this.setState({ videos: videos, selectedVideo: videos[0] }); // through states setting the default video

    render() {
        // for consistent ui such that it re-renders after 300ms on search
        const videoSearch = debounce(term => {
        }, 300);
        return (
            <div className="container">
                <SearchBar onSearchTermChange={videoSearch} />
                <div className="columns">
                    <VideoDetail video={this.state.selectedVideo} />
                        onVideoSelect={selectedVideo => {
                            this.setState({ selectedVideo });

export default App;


After this when you start the react.js application your game will start and the screenshot will look like this

See also  React.js Redux Github API Username Search With Repositories Data Using React-Router in Javascript Full Project For Beginners



Leave a Reply