Let’s explore how to use setTimeout in React

src/App.js

@@ -5,9 +5,13 @@ import { Switch, Route, BrowserRouter, Link } from 'react-router-dom'
 import FinishedGhibliMovies from './finished/GhibliMovies';
 import FinishedTwoButtons from './finished/TwoButtons'
 import FinishedKittenVotes from './finished/KittenVotes';
+import FinishedStatefulButton from './finished/StatefulButton';
+
 import TwoButtons from './toDo/TwoButtons';
 import GhibliMovies from './toDo/GhibliMovies';
 import KittenVotes from './toDo/KittenVotes';
+import StatefulButton from './toDo/StatefulButton';
+
 import MainPage from './MainPage';
 
 
@@ -25,6 +29,8 @@ function App() {
             <Link className='nav-link' to="/useState">useState</Link>
             <Link className='nav-link' to="/useEffect">useEffect</Link>
             <Link className='nav-link' to="/useContext">useContext</Link>
+            <Link className ='nav-link' to="/useStateButton">useStateButton</Link> 
+
           </Nav>
           <Form.Switch checked={showFinished} onChange={() => setShowFinished(!showFinished)}>
             Show finished components
@@ -54,6 +60,11 @@ function App() {
           path="/useContext"
           component={showFinished ? FinishedTwoButtons : TwoButtons}
         />
+        <Route
+          exact
+          path="/useStateButton"
+          component={showFinished ? FinishedStatefulButton : StatefulButton}
+        />
      </Switch>
      </Container>
     </BrowserRouter>

src/toDo/GhibliMovies.jsx

@@ -18,16 +18,55 @@ import { MovieTable } from '../helperComponents';
 */
 
 
-
 const GhibliMovies = () => {
   const [movies, setMovies] = useState([]);
-
+  useEffect(() => {
+    GhibliApiService.getMovieList().then((data) => {
+    setMovies(data);
+
+    })
+  }, [])
   return (
     <>
       <h1>useEffect</h1>
       <MovieTable movies={movies} />
+      </>
+  )
+}
+
+const usePictures = () => {
+  const [pics, setPics] = useState([]);
+  const [count, setCount] = useState(0);
+  const [countInTimeout, setCountInTimeout] = useState(0);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      console.log('This will run after 5 second!')
+      setCountInTimeout(count); // count is 0 here
+        GhibliApiService.getMovieList().then((data)=>{
+        setPics(data)
+
+    }, 5000);
+    setCount(5);
+    console.log("count: " +count)
+    console.log("setTimeout count: " + countInTimeout)
+    return () => clearTimeout(timer);
+
+    })
+  },[])
+  return pics
+}
+const GhiblicustomHook = () => {
+
+
+  return (
+    <>
+      <h1> useMovies - Custom Hook</h1>
+      <MovieTable movies = {usePictures()} />
+
+
     </>
   )
-};
+}
+
 
-export default GhibliMovies;
+export default GhiblicustomHook

src/toDo/KittenVotes.jsx

@@ -12,13 +12,14 @@ import { Card, Button, CardGrid} from '@edx/paragon';
 */
 
 const KittenVotes = () => {
-
+    const [meow, meowClicks] = useState(0);
+    const [princess, princessClicks] = useState(0);
 
   return (
     <>
       <h1>useState</h1>
-      <div className="py-3">Meowser was clicked 0 times!</div>
-      <div className="py-3">Princess Purr was clicked 0 times!</div>
+      <div className="py-3">Meowser was clicked {meow} times!</div>
+      <div className="py-3">Princess Purr was clicked {princess} times!</div>
       {/* Display vote counts here */}
       <CardGrid>
         <Card style={{ width: '18rem' }}>
@@ -30,6 +31,7 @@ const KittenVotes = () => {
               Vote for Meowser!
             </Card.Text>
             {/* Meowser button here */}
+            <Button variant = "primary" onClick={() => meowClicks((prevClick) => prevClick + 1)}>Meow</Button>
           </Card.Body>
         </Card>
         <Card style={{ width: '18rem' }}>
@@ -40,6 +42,8 @@ const KittenVotes = () => {
               Vote for Princess Purr!
             </Card.Text>
             {/* Princess Purr button here */}
+            <Button onClick = {() => princessClicks((prevClick)=> prevClick + 1)}>Princess</Button>
+
           </Card.Body>
         </Card>
       </CardGrid>

src/toDo/StatefulButton.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import {Button} from '@edx/paragon';
+import {Button, TextArea} from '@edx/paragon';
 
 /* INSTRUCTIONS for useState
     Using the `useState` hook, create a button that increments a counter and displays the current button count
@@ -10,10 +10,22 @@ import {Button} from '@edx/paragon';
 
 
 const StatefulButton = () => {
+  const [increment, setIncrement] = useState(0);
   return (
     <>
       <h1>useState</h1>
       {/* PUT BUTTON HERE */}
+
+
+      <div>{increment}</div>
+      <br/>
+      <Button onClick = {() => setIncrement((prev)=> prev + 1)}> Up!  </Button>
+
+
+      <Button onClick = {() => setIncrement((prev)=> prev - 1)}> Down! </Button>
+
+      <Button onClick = {()=> setIncrement(0)}>Clear</Button>
+
     </>
   )
 };

src/toDo/TwoButtons.jsx

@@ -9,29 +9,79 @@ import { Button } from '@edx/paragon'
     - ClickReport
       - should display the click count
 */
+const themes = {
+
+  light:{
+
+    color: 'purple',
+    backgroundColor: 'green',
+  },
+  dark: {
+    color: 'green',
+    backgroundColor: 'yellow',
+  }
+
+};
 
 const ClickContext = React.createContext();
+const ThemeContext = React.createContext();
 
 const ClickContextProvider = ({ children }) => {
   const [count, setCount] = useState(0)
   return <ClickContext.Provider value={[count, setCount]}>{children}</ClickContext.Provider>
 }
 
-const ContextButton = () => {
+const ThemeContextProvider = ({ children}) => {
+
+  return <ThemeContext.Provider value = {themes}>{children}</ThemeContext.Provider>
+
+}
+
+const ContextButton = ({ text }) => {
+  const [aclick, setAclick] = useContext(ClickContext)
+  return <Button onClick = {() => setAclick((prev) => prev + 1)}>{text}</Button>
 
 }
 
 const ClickReport = () => {
+  const [display] = useContext(ClickContext)
+
+  return <p>The count is {display}</p>
 
 }
+const ClearButton = ({text, className}) => {
+  const [clear, setClear] = useContext(ClickContext)
+  return <Button onClick = {() => setClear(0)}>{text}</Button>
+}
+const ThemedButton = ({text}) => {
+ const color = useContext(ThemeContext)
+  return <button style = {color.dark}>{text}</button>
+}
+
+
 
 const TwoButtons = () => {
   return (
     <>
       <h1>useContext</h1>
       <ClickContextProvider>
         {/* Put Buttons and ClickReport here */}
+        <ContextButton text="Click Me!"></ContextButton>
+
+        <ContextButton text = "Click Me too!!"></ContextButton>
+        <br/>
+        <br/>
+
+        <ClearButton className = "mr-2" text = "Set to 0"></ClearButton>
+        <ThemeContextProvider>
+          <ThemedButton text="Dark"></ThemedButton>
+          </ThemeContextProvider>
+
+
+          <ClickReport/>
+
       </ClickContextProvider>
+
       {/* What happens if you put buttons here? */}
     </>
   )