adds basic video list to app display

src/App.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
-import CustomerList from './components/Customers';
+import Customers from './components/Customers';
+import Videos from './components/Videos';
 
 class App extends Component {
   render() {
@@ -14,7 +15,8 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
-        < CustomerList />
+        <Customers />
+        <Videos />
       </div>
     );
   }

src/components/Video.js

@@ -0,0 +1,15 @@
+const Video = (props) => {
+    return (
+      <div>
+        <h1>{props.title}</h1>
+      </div>
+    )
+  }
+
+  Video.propTypes = {
+    // DONT FORGET TO FILL ME OUT!
+    // addCardCallback: PropTypes.func.isRequired
+    };
+
+
+  export default Video;    

src/components/Videos.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Video from './Video';
+
+// import logo from './logo.svg';
+// import './App.css';
+
+const Videos = () => {
+
+  const [videoList, setVideosList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const VIDEO_URL = 'http://localhost:3000/videos'
+
+  useEffect(() => {
+    axios.get(VIDEO_URL)
+      .then((response) => {
+        // console.log(response.data);
+        const railsVideoList = response.data;
+        // console.log(apiCustomerResponse[0].name)
+        // Set the state
+        setVideosList(railsVideoList);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  }, []);
+
+  const generateVideos = (videos) => {
+    let videoComponentArray = [];
+
+  for (const video of videos) 
+
+  {
+    videoComponentArray.push(
+      <Video
+          key={video.id}
+          id={video.id}
+          title={video.title}
+      />
+    )
+  }
+
+    return videoComponentArray;
+  }; 
+
+    return (
+      <div>
+        Video List
+        {generateVideos(videoList)}
+      </div>
+    );
+  }
+
+Videos.propTypes = {
+  // DONT FORGET TO FILL ME OUT!
+  // addCardCallback: PropTypes.func.isRequired
+  };
+
+
+export default Videos;