pair programming

index.js

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 = 'AIzaSyA3EACxxpvIrSqD355X1tKVu0PrmCg05mM';

YTSearch({key: API_KEY, term: 'surfboards'}, function(data){
  console.log(data);
});

// Create a new component. This component should produce
//some HTML

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

    this.state = { video: [] };

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

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

// Take this component's generaed HTML and put it on the page (in the DOM)
ReactDOM.render(<App />, document.querySelector('.container'));