Enhanced Youtube # 3 - Video List

video.list.js

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

// step two
const VideoListItem = (props) => {
    return (
        <li>Video</li>
    );
};

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

// step three
const videoList = videos.map( v => <VideoListItem key={v.etag} video={v} />);