added react-3

Author: abhishekrathore

src/App.js

@@ -1,24 +1,23 @@
 import './App.css';
 import Video from './components/Video';
-
+import videos from './data/data'
 function App() {
-  let obj = {
-    title: 'React JS tutorial',
-    views: '999K',
-    time: '1 year ago',
-    channel: 'Coder Dost',
-  };
+  
   return (
     <div className="App">
       <div>Videos</div>
-      <Video {...obj}></Video>
-      <Video title="Node JS tutorial" views="100K" time="1 month ago"></Video>
-      <Video
-        title="Mongo DB tutorial"
-        views="1M"
-        time="1 month ago"
-        channel="Coder Dost"
-      ></Video>
+      {
+        videos.map(video=><Video
+          key={video.id}
+          title={video.title}
+          views={video.views}
+          time={video.time}
+          channel={video.channel}
+          verified={video.verified}
+          id={video.id}
+        ></Video>)
+      }
+    
     </div>
   );
 }

src/components/Video.js

@@ -1,14 +1,16 @@
 import './Video.css';
 
-function Video({title,channel="Coder Dost",views,time}) {
+function Video({title,id,channel="Coder Dost",views,time,verified}) {
+   
+  
   return (
       <>
       <div className='container'>
       <div className="pic">
-      <img src="http://placeimg.com/160/90/1" alt="Katherine Johnson" />
+      <img src={`https://picsum.photos/id/${id}/160/90`} alt="Katherine Johnson" />
       </div>
       <div className="title">{title}</div>
-      <div className="channel">{channel}</div>
+      <div className="channel">{channel} {verified && '✅'} </div>
       <div className="views">
         {views} views <span>.</span> {time}
       </div>

src/data/data.js

@@ -0,0 +1,24 @@
+const videos = [{
+    id:1,
+    title: 'React JS tutorial',
+    views: '999K',
+    time: '1 year ago',
+    channel: 'Coder Dost',
+    verified: true
+  },{
+    id:2,  
+    title: 'Node JS tutorial',
+    views: '100K',
+    time: '1 year ago',
+    channel: 'Coder Dost',
+    verified: false
+  },
+  { id:3,
+    title: 'React JS tutorial',
+    views: '1M',
+    time: '1 month ago',
+    channel: 'Coder Dost',
+    verified: true
+  }];
+
+export default videos;