Pass data from state to component

We have a component

import React from 'react'

const VideoList = () => {
    return (
        <ul className="col-md-4 list-group">
        </ul>
    );
};

export default VideoList;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import SearchBar from "./components/search_bar";

const API_KEY = 'AIzaSyA-bXhmw210xmNmiVTZ3nxWfiKwLqfxbpg';

const App = () => {
    return (
        <div>
            <SearchBar/>
        </div>
    );
};

ReactDOM.render(
    <App/>
    , document.querySelector('.container'));

And we have a main class with state

class App extends Component {
    constructor(props) {
        super(props);

        this.state = { videos: [] };

        YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
            this.setState({videos})
        });
    }

    render() {
        return (
            <div>
                <SearchBar/>
                <VideoList/>
            </div>
        );
    }
}

ReactDOM.render(<App/>, document.querySelector('.container'));

To pass data we should declare JSX attribute of property, and pass data from state as a value

    // inside App class
    ...
    render() {
        return (
            <div>
                <SearchBar/>
                <VideoList videos={this.state.videos}/>
            </div>
        );
    }
    ...

Passed values will arrive as props into component

const VideoList = (props) => {
    return (
        <ul className="col-md-4 list-group">
        </ul>
    );
};

So, now we could access any data from it

const VideoList = (props) => {
    return (
        <ul className="col-md-4 list-group">
            {props.videos.length}
        </ul>
    );
};