rendering videos

client/src/App.js

@@ -1,7 +1,7 @@
 import "./App.css";
-import SearchBar from "./SearchBar.js";
-import VideoCard from "./VideoCard";
 import AddVideo from "./AddVideo";
+import VideoCards from "./VideoCards";
+import SearchBar from "./SearchBar.js";
 
 function App() {
   return (
@@ -10,7 +10,7 @@ function App() {
         <h1>Video Recommendation</h1>
       </header>
       <AddVideo />
-      <VideoCard />
+      <VideoCards />
       <SearchBar />
     </div>
   );

client/src/VideoCard.js → client/src/SingleVideoCard.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-function VideoCard() {
+function SingleVideoCard({ title, url }) {
   const [count, setCount] = useState(0);
 
   function minusCount() {
@@ -10,30 +10,34 @@ function VideoCard() {
   function plusCount() {
     setCount((prevCount) => prevCount + 1);
   }
+  if (!url) {
+    return <div>No video URL provided.</div>;
+  }
 
+  const videoId = url.split("v=")[1];
   return (
     <div className="card-container">
       <div className="card">
         <iframe
           className="card-thumb"
           width="320"
           height="320"
-          src="https://www.youtube.com/embed/{DAOZJPquY_w}"
+          src={`https://www.youtube.com/embed/${videoId}`}
           title="YouTube video player"
-          frameborder="0"
+          frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen
+          allowFullScreen
         ></iframe>
         <div className="card-body">
           <button onClick={minusCount}>-</button>
           <span>{count}</span>
           <button onClick={plusCount}>+</button>
-          <h2>Video Title</h2>
+          <h2>{title}</h2>
           <p>Paragraph</p>
           <button className="btn btn-primary">Delete</button>
         </div>
       </div>
     </div>
   );
 }
-export default VideoCard;
+export default SingleVideoCard;

client/src/VideoCards.js

@@ -0,0 +1,15 @@
+import React from "react";
+import SingleVideoCard from "./SingleVideoCard";
+import exampleResponse from "./exampleResponse.json";
+
+function VideoCards() {
+  return (
+    <>
+      {exampleResponse.map((video) => (
+        <SingleVideoCard key={video.id} title={video.title} url={video.url} />
+      ))}
+    </>
+  );
+}
+
+export default VideoCards;