import React from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';

import SearchBar from './components/search_bar';

const API_KEY = "AIzaSyB2tAzw4zjNOY0LBfL_PpqPgariWzZJFhE";

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

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

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

// Take this component's generated HTML and put it
// on the page in the DOM

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

@@ -5,16 +5,30 @@
 rt React
+, %7B Component%7D
  from 'r
@@ -382,27 +382,52 @@
 L%0A%0Ac
-onst
+lass
  App 
-= () =%3E
+extends Component %7B%0A  render()
  %7B%0A
+  
   re
@@ -435,14 +435,23 @@
 urn 
+(%0A     
 %3Cdiv%3E%0A
+  
     
@@ -471,15 +471,25 @@
 %0A   
+  
 %3C/div%3E%0A
+  );%0A %7D%0A
 %7D%0A%0A/

refactor functional component to class component