JSreact渲染问题

我是一个用webpack潜入ReactJS的初学者。在Udemy上我自己的自由课程，但我不明白为什么我的代码不能工作，因为代码看起来和我跟着的视频完全一样。

问题很简单，为什么视频细节文件不能正确渲染?

虽然我有5个组件文件，我将只包括父index.js和子video_detail.js的问题，我只有这2个文件。

index.js文件

import React, {Component } from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/searchbar';
import VideoList from './components/video_list';
import VideoDetail from './components/video_detail';
const API_KEY = 'AIzaSyAi1CzVpifuFUDVQf3dzrTu3mwJDP2n8r8';
class App extends Component {
	constructor(props){
		super(props);
		//Do i expect this component to play any type of state? aka pass props
		this.state= { videos: []};
				  //  ^proper name can be anything
		YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
//	console.log(data);
		this.setState({ videos });
});		// this.setState({videos : vidoos});  
	}
	render (){
	return (
	<div>
		<SearchBar />
		<VideoDetail video={this.state.video[0]} />
		<VideoList videos={this.state.videos} /> 
            
	</div>
	 ); 
	}
}
ReactDOM.render(<App />, document.querySelector('.container'));

video_detail.js文件

import React from 'react';
const VideoDetail = ({video}) => {
	if (!video) {
		return<div>Loading...</div>;
	}
	const videoId = video.id.videoId;
	const url = `https://www.youtube.com/embed/${videoId}`;
	return(
		<div className="video-detail col-md-8">
			<div className="embed-responsive embed-responsive-16by9">
				<iframe className="embed-responsive-item" src={url}> </iframe>
			</div>
		<div className="details">
		<div>{video.snippet.title}</div>
		<div>{video.snippet.description}</div>
		</div>
	  </div>
	);
};
export default VideoDetail;

附加信息:谷歌stephen grider github和存储库将弹出，我使用ReduxSimpleStarter。这将有助于回答上述问题，我希望!