Why this React child component seems can’t retrieve data from the state? [closed]

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:

enter image description here

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?