react-5

Author: abhishekrathore

src/App.js

@@ -1,11 +1,27 @@
+import { useState } from 'react';
 import './App.css';
+import Counter from './components/Counter';
 import PlayButton from './components/PlayButton';
 import Video from './components/Video';
-import videos from './data/data';
+import videoDB from './data/data';
 function App() {
+  console.log('render App')
+
+  const [videos,setVideos] = useState(videoDB);
+
   return (
     <div className="App" onClick={()=>console.log('App')}>
-      <div>Videos</div>
+      <div>
+        <button onClick={()=>{
+           setVideos( [...videos,{ id:videos.length+1,
+            title: 'Demo JS tutorial',
+            views: '1M',
+            time: '1 month ago',
+            channel: 'Coder Dost',
+            verified: true
+          }]);
+        }}>Add Video</button>
+      </div>
       {videos.map((video) => (
         <Video
           key={video.id}
@@ -30,6 +46,9 @@ function App() {
 
         {/* <PlayButton message="pause-msg" onSmash={()=>alert('Playyy')}>Pause</PlayButton> */}
       </div>
+
+      <Counter></Counter>
+
     </div>
   );
 }

src/components/Counter.js

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+function Counter(){
+    console.log('render Counter')
+    const [number, setNumber] = useState(0);
+
+    function handleClick(e){
+        e.stopPropagation();
+       
+       setNumber(number=>number+1);
+       setNumber(number=>number+1);
+       setNumber(number=>number+1);
+        
+        console.log(number)
+    }
+
+    return(
+        <>
+        <h1 style={{color:'white'}}>{number}</h1>
+        <button onClick={handleClick}>Add</button>
+        </>
+    )
+
+}
+
+export default Counter;

src/components/PlayButton.js

@@ -1,19 +1,22 @@
 import './PlayButton.css';
+import { useState } from 'react';
 
 function PlayButton({message,children,onPlay,onPause}){
-    let playing = false;  // don't use this approach;
+    console.log('render PlayButton')
+
+    const [playing, setPlaying] = useState(false);  
     function handleClick(e){
-        console.log(e)
+        // console.log(e)
         e.stopPropagation()
 
         if(playing) onPause()
         else onPlay();
 
-        playing = !playing;
+        setPlaying(!playing);
     }
 
     return (
-        <button onClick={handleClick}>{children} : {playing?'>':'||'}</button>
+        <button onClick={handleClick}>{children} : {playing?'⏸️':'⏯️'}</button>
     )
 
 }

src/components/Video.js

@@ -1,7 +1,8 @@
 import './Video.css';
 
 function Video({title,id,channel="Coder Dost",views,time,verified,children}) {
-   
+  console.log('render Video')
+
 
   return (
       <>