in-class activity

README.md

@@ -43,4 +43,6 @@ To learn more about React.js, take a look at the [React Documentation](https://l
 
 ## What to Submit?
 
-Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
+Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
+
+02/20/24 work complete

src/pages/index.js

@@ -1,13 +1,14 @@
 // import Head from 'next/head'
 // import Image from 'next/image'
 // import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
-import Profile from './components/profile'
+import styles from'@/styles/Home.module.css'
+import Form1 from './components/artistsArr.js'
+import Form2 from './qcomps/arrObj.js'
 
 export default function Home() {
   return (
     <div className={styles.main}>
-        <Profile />
+        <Form2 />
     </div>
   )
 }

src/pages/qcomps/arrObj.js

@@ -10,21 +10,25 @@ const initialList = [
 export default function BucketList() {
   const [myList, setMyList] = useState(initialList);
   const [yourList, setYourList] = useState(
-    initialList
+    initialList.map((i) => {
+      return {...i}
+    })
   );
 
   function handleToggleMyList(artworkId, nextSeen) {
     const tmpList = myList.map(e => {
         if (e.id === artworkId) {
-            e.seen = nextSeen
+            return {...e, seen: nextSeen}
+        }
+        else {
+          return e
         }
-        return e
     });
     setMyList(tmpList);
   }
 
   function handleToggleYourList(artworkId, nextSeen) {
-    const tmpList = yourList.map(e => {
+    const tmpList = myList.map(e => {
         if (e.id === artworkId) {
             e.seen = nextSeen
         }

src/pages/qcomps/artistsRemoveArr.js

@@ -19,7 +19,9 @@ export default function List() {
           <li key={artist.id}>
             {artist.name}{' '}
             <button onClick={() => {
-              artists.splice(artist.id, 1)
+              setArtists(artists.filter((obj) => {
+                  return obj.id != artist.id
+              }))
             }}>
               Delete
             </button>

src/pages/qcomps/shoppingCart.js

@@ -5,10 +5,10 @@ export default function RequestTracker() {
   const [completed, setCompleted] = useState(0);
 
   async function handleClick() {
-    setPending(pending + 1);
+    setPending(p => p + 1);
     await delay(3000);
-    setPending(pending - 1);
-    setCompleted(completed + 1);
+    setPending(p => p - 1);
+    setCompleted(c => c + 1);
   }
 
   return (

src/pages/qcomps/updObjectsForm.js

@@ -20,7 +20,8 @@ export default function Scoreboard() {
 
   function handleLastNameChange(e) {
     setPlayer({
-      lastName: e.target.value
+      ...player,
+      lastName: e.target.value,
     });
   }