React YouTube Viewer

react-youtube-06-App.js

import React, { useState, useEffect } from 'react';
import { Search } from './Search';
import { Video } from './Video';

export function App() {
    const [currentChannelId, setCurrentChannelId] = useState();
    const [videos, setVideos] = useState([]);

    const baseUrl = 'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D';

    useEffect(() => {
        (async () => {
            if (currentChannelId) {
                try {
                    const data = await fetch(`${baseUrl}${currentChannelId}`).then(response => response.json());
                    setVideos(data.items);
                } catch (error) {
                    console.log(error);
                }
            }
        })();
    }, [currentChannelId]);

    return (
        <div className="app-container">
            <h1>Latest YouTube Videos</h1>
            <Search setCurrentChannelId={id => setCurrentChannelId(id)} />
            <div className="videos">
                {videos.map(video => <Video key={video.guid} video={video} />)}
            </div>
        </div>
    );
}