import React, { useState, useEffect } from 'react';
Grabbing my custom hooks
function useFetch(url, defaultResponse) {
const [data, setData] = useState(defaultResponse);
async function getDataFromAPI(url) {
try {
const res = await fetch(url);
const data = await res.json();
setData({
isLoading: false,
data
})
} catch (e) {
console.log(e);
}
}
useEffect(() => {
getDataFromAPI(url);
}, [url])
return data;
}
Constructing a personalized hook
export default function YouTubeData() {
const channelID = "UCXgGY0wkgOzynnHvSEVmE3A";
const APIKEY = "my-working-key";
const results = 4
const apiEndpoint = `https://www.googleapis.com/youtube/v3/search?key=${APIKEY}&channelId=${channelID}&part=snippet,id&order=date&&maxResults=${results}`
const userFetchResponse = useFetch(apiEndpoint, { isLoading: true, data: null });
if (!userFetchResponse.data || userFetchResponse.isLoading) {
return 'Loading...'
}
Upon logging userFetchResponse.data.items, I receive an array object with various properties
const {videoId} = (userFetchResponse.data.items.map(obj => "http://www.youtube.com/embed/" + obj.id.videoId));
return (
<div>
{
videoId.map((link, i) => {
var frame =
<div key={i} className='youtube'>
<iframe
title={i}
width="560"
height="315"
src={link}
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
</iframe>
</div>
return frame
})
}
{this.frame}
</div>
)
}
I am facing difficulties creating the variable videoID to store an array of URLs for the jsx src; any assistance?