I am very new in React.js and I have the following problem trying to implement the following example from a Udemy course.
Fist of all I have this index.html main page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq06l5RUVfib62IYRQacLc-KAy0XIWAVs"></script>
</head>
<body>
<div class="container"></div>
</body>
<script src="/bundle.js"></script>
</html>
then I have the related index.js file:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/search_bar';
import VideoList from './components/video_list';
const API_KEY = 'MY-YOUTUBE-API-KEY';
class App extends Component {
constructor(props) {
super(props);
this.state = { videos: [] };
YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
console.log(videos);
//this.setState({ videos: videos});
this.setState({ videos }); // if have the 2 variables have the same name can be condensed
})
}
render() {
return (
<div>
<SearchBar />
<VideoList videos={this.state.videos} />
</div>
);
}
}
// Take this component's generated HTML and put it on the page (in the DOM):
ReactDOM.render(<App />, document.querySelector('.container')); // This <App /> is an instancve of the App class returned by the function
NOTE: this is preloading some videos calling the YTSearch() and infact the console.log() is showing an array of 5 objects that will be put into the state.
As you can see the previos code contains this render() method:
render() {
return (
<div>
<SearchBar />
<VideoList videos={this.state.videos} />
</div>
);
}
that renders two sub components that are:
SearchBar: used to search and retrieve videos from Youtube:
import React, {Component} from 'react';
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: 'Starting value' };
}
render() {
return (
<div>
<input
value={this.state.term}
onChange={event => this.setState({ term: event.target.value })} />
Value of the input: {this.state.term}
</div>
);
}
}
export default SearchBar;
As you can see it put the sarched temes into the React state.
Then I have the VideoList component that should show the list of the retrieved videos, at the moment I have something very minimalist like this:
import React from 'react';
const VideoList = (props) => {
//const videos = props.videos;
return(
<p>Video number: {props.videos.lenght}</p>
)
}
export default VideoList;
My problem is that this is what I am obtaining:
As you can see the props.videos.lenght seems to be null or something like this.
What is wrong? What am I missing? How can I try to fix it?
