Clash Royale CLAN TAG#URR8PPP

Unable get Playlists data Youtube Data API error 400 in ReactJS

I am building a react component which get the data from youtube data api but I am getting an error 400. Below is my code

import React from 'react';

const key = 'xxx-Y-xxxx';
const playlistId = 'xxx-xx-xx';
const url = 'https://www.googleapis.com/youtube/v3/playlistItems';

const options =
'part': 'snippet',
key,
'maxResults': 5,
playlistId


class Youtube extends React.Component
constructor(props)
super(props);
this.state =
video: <iframe title="video" src="https://www.youtube.com/embed/-UkuypFGXWo" frameBorder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>


componentDidMount()
fetch(url, options)
.then((data) => data.json())
.then((dataJson) =>
console.log(dataJson)
)
.catch((error) =>
console.log(error);
)

render()
return (
<div>
this.state.video
</div>
)



export default Youtube;


As of now I am just trying to fetch the data, later I will map over the items to display as individual video, which then on click play on main video frame. Also I checked the API key is enabled.

1 Answer
1

Can you try this

import React from 'react';

const key = 'xxx-Y-xxxx';
const playlistId = 'xxx-xx-xx';
const url = 'https://www.googleapis.com/youtube/v3/playlistItems';

const options =
'part': 'snippet, contentDetails',
'key': key,
'maxResults': 5,
'playlistId': playlistId


class Youtube extends React.Component
constructor(props)
super(props);
this.state =
video: <iframe title="video" src="https://www.youtube.com/embed/-UkuypFGXWo" frameBorder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>


componentDidMount()
fetch(url, "method": "GET", "body": options)
.then(res => res.json())
.then(data =>
console.log(data)
)
.catch((error) =>
console.log(error);
)

render()
return (
<div>
this.state.video
</div>
)



export default Youtube;


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.