diff --git a/README.md b/README.md
index 891dcb4d..f8827421 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Ankur Haritosh
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.
@@ -43,4 +43,4 @@ 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.
\ No newline at end of file
+Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
diff --git a/src/pages/qcomps/arrObj.js b/src/pages/qcomps/arrObj.js
index 68d5e9c5..19efde7b 100644
--- a/src/pages/qcomps/arrObj.js
+++ b/src/pages/qcomps/arrObj.js
@@ -1,73 +1,57 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Big Bellies', seen: false },
-  { id: 1, title: 'Lunar Landscape', seen: false },
-  { id: 2, title: 'Terracotta Army', seen: true },
+    { id: 0, title: 'Big Bellies', seen: false },
+    { id: 1, title: 'Lunar Landscape', seen: false },
+    { id: 2, title: 'Terracotta Army', seen: true },
 ];
 
 export default function BucketList() {
-  const [myList, setMyList] = useState(initialList);
-  const [yourList, setYourList] = useState(
-    initialList
-  );
+    const [myList, setMyList] = useState(initialList);
+    const [yourList, setYourList] = useState(initialList);
 
-  function handleToggleMyList(artworkId, nextSeen) {
-    const tmpList = myList.map(e => {
-        if (e.id === artworkId) {
-            e.seen = nextSeen
-        }
-        return e
-    });
-    setMyList(tmpList);
-  }
+    function handleToggleMyList(artworkId, nextSeen) {
+        const updatedList = myList.map(item =>
+            item.id === artworkId ? { ...item, seen: nextSeen } : item
+        );
+        setMyList(updatedList);
+    }
 
-  function handleToggleYourList(artworkId, nextSeen) {
-    const tmpList = yourList.map(e => {
-        if (e.id === artworkId) {
-            e.seen = nextSeen
-        }
-        return e
-    });
-    setYourList(tmpList);
-  }
+    function handleToggleYourList(artworkId, nextSeen) {
+        const updatedList = yourList.map(item =>
+            item.id === artworkId ? { ...item, seen: nextSeen } : item
+        );
+        setYourList(updatedList);
+    }
 
-  return (
-    <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
-      <ItemList
-        artworks={myList}
-        onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
-      <ItemList
-        artworks={yourList}
-        onToggle={handleToggleYourList} />
-    </>
-  );
+    return (
+        <>
+            <h1>Art Bucket List</h1>
+            <h2>My list of art to see:</h2>
+            <ItemList artworks={myList} onToggle={handleToggleMyList} />
+            <h2>Your list of art to see:</h2>
+            <ItemList artworks={yourList} onToggle={handleToggleYourList} />
+        </>
+    );
 }
 
 function ItemList({ artworks, onToggle }) {
-  return (
-    <ul>
-      {artworks.map(artwork => (
-        <li key={artwork.id}>
-          <label>
-            <input
-              type="checkbox"
-              checked={artwork.seen}
-              onChange={e => {
-                onToggle(
-                  artwork.id,
-                  e.target.checked
-                );
-              }}
-            />
-            {artwork.title}
-          </label>
-        </li>
-      ))}
-    </ul>
-  );
+    return (
+        <ul>
+            {artworks.map(artwork => (
+                <li key={artwork.id}>
+                    <label>
+                        <input
+                            type="checkbox"
+                            checked={artwork.seen}
+                            onChange={e => {
+                                onToggle(artwork.id, e.target.checked);
+                            }}
+                        />
+                        {artwork.title}
+                    </label>
+                </li>
+            ))}
+        </ul>
+    );
 }
diff --git a/src/pages/qcomps/artistsRemoveArr.js b/src/pages/qcomps/artistsRemoveArr.js
index 5c4709f5..0f48b5bd 100644
--- a/src/pages/qcomps/artistsRemoveArr.js
+++ b/src/pages/qcomps/artistsRemoveArr.js
@@ -1,31 +1,33 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 let initialArtists = [
-  { id: 0, name: 'Marta Colvin Andrade' },
-  { id: 1, name: 'Lamidi Olonade Fakeye'},
-  { id: 2, name: 'Louise Nevelson'},
+    { id: 0, name: 'Marta Colvin Andrade' },
+    { id: 1, name: 'Lamidi Olonade Fakeye'},
+    { id: 2, name: 'Louise Nevelson'},
 ];
 
 export default function List() {
-  const [artists, setArtists] = useState(
-    initialArtists
-  );
+    const [artists, setArtists] = useState(initialArtists);
 
-  return (
-    <>
-      <h1>Inspiring sculptors:</h1>
-      <ul>
-        {artists.map(artist => (
-          <li key={artist.id}>
-            {artist.name}{' '}
-            <button onClick={() => {
-              artists.splice(artist.id, 1)
-            }}>
-              Delete
-            </button>
-          </li>
-        ))}
-      </ul>
-    </>
-  );
+    const handleDeleteArtist = (artistId) => {
+        // Create a new array with the artist removed
+        const updatedArtists = artists.filter(artist => artist.id !== artistId);
+        setArtists(updatedArtists);
+    };
+
+    return (
+        <>
+            <h1>Inspiring sculptors:</h1>
+            <ul>
+                {artists.map(artist => (
+                    <li key={artist.id}>
+                        {artist.name}{' '}
+                        <button onClick={() => handleDeleteArtist(artist.id)}>
+                            Delete
+                        </button>
+                    </li>
+                ))}
+            </ul>
+        </>
+    );
 }
diff --git a/src/pages/qcomps/bios.js b/src/pages/qcomps/bios.js
index cc9350fd..e1bfa649 100644
--- a/src/pages/qcomps/bios.js
+++ b/src/pages/qcomps/bios.js
@@ -1,12 +1,14 @@
+import React from 'react';
+
 export default function Bio() {
   return (
-    <div class="intro">
-      <h1>Welcome to my website!</h1>
-    </div>
-    <p class="summary">
-      You can find my thoughts here.
-      <br/><br/>
-      <b>And <i>pictures</i></b> of people!
-    </p>
+      <div className="intro">
+        <h1>Welcome to my website!</h1>
+        <p className="summary">
+          You can find my thoughts here.
+          <br/><br/>
+          <b>And <i>pictures</i></b> of people!
+        </p>
+      </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/qcomps/firstcomp.js b/src/pages/qcomps/firstcomp.js
index 9cce715e..bc77fe5a 100644
--- a/src/pages/qcomps/firstcomp.js
+++ b/src/pages/qcomps/firstcomp.js
@@ -1 +1,12 @@
-function MyComp() {}
\ No newline at end of file
+import React from 'react';
+
+function MyComp() {
+    return (
+        <div>
+            <h1>Hello from MyComp!</h1>
+            <p>This is a simple functional component.</p>
+        </div>
+    );
+}
+
+export default MyComp;
diff --git a/src/pages/qcomps/gallery_props.js b/src/pages/qcomps/gallery_props.js
index fc118123..c62bbcf4 100644
--- a/src/pages/qcomps/gallery_props.js
+++ b/src/pages/qcomps/gallery_props.js
@@ -1,55 +1,58 @@
-export default function Gallery() {
+import React from 'react';
+
+const scientistsData = [
+  {
+    name: 'Maria Skłodowska-Curie',
+    imageUrl: 'https://i.imgur.com/szV5sdGs.jpg',
+    profession: 'physicist and chemist',
+    awards: ['Nobel Prize in Physics', 'Nobel Prize in Chemistry', 'Davy Medal', 'Matteucci Medal'],
+    discovery: 'polonium (element)'
+  },
+  {
+    name: 'Katsuko Saruhashi',
+    imageUrl: 'https://i.imgur.com/YfeOqp2s.jpg',
+    profession: 'geochemist',
+    awards: ['Miyake Prize for geochemistry', 'Tanaka Prize'],
+    discovery: 'a method for measuring carbon dioxide in seawater'
+  }
+];
+
+function ScientistProfile({ scientist }) {
   return (
-    <div>
-      <h1>Notable Scientists</h1>
       <section className="profile">
-        <h2>Maria Skłodowska-Curie</h2>
+        <h2>{scientist.name}</h2>
         <img
-          className="avatar"
-          src='https://i.imgur.com/szV5sdGs.jpg'
-          alt="Maria Skłodowska-Curie"
-          width={70}
-          height={70}
+            className="avatar"
+            src={scientist.imageUrl}
+            alt={scientist.name}
+            width={70}
+            height={70}
         />
         <ul>
           <li>
             <b>Profession: </b>
-            physicist and chemist
+            {scientist.profession}
           </li>
           <li>
-            <b>Awards: 4 </b>
-            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
+            <b>Awards: </b>
+            {scientist.awards.join(', ')}
           </li>
           <li>
             <b>Discovered: </b>
-            polonium (element)
+            {scientist.discovery}
           </li>
         </ul>
       </section>
-      <section className="profile">
-        <h2>Katsuko Saruhashi</h2>
-        <img
-          className="avatar"
-          src='https://i.imgur.com/YfeOqp2s.jpg'
-          alt="Katsuko Saruhashi"
-          width={70}
-          height={70}
-        />
-        <ul>
-          <li>
-            <b>Profession: </b>
-            geochemist
-          </li>
-          <li>
-            <b>Awards: 2 </b>
-            (Miyake Prize for geochemistry, Tanaka Prize)
-          </li>
-          <li>
-            <b>Discovered: </b>
-            a method for measuring carbon dioxide in seawater
-          </li>
-        </ul>
-      </section>
-    </div>
+  );
+}
+
+export default function Gallery() {
+  return (
+      <div>
+        <h1>Notable Scientists</h1>
+        {scientistsData.map((scientist, index) => (
+            <ScientistProfile key={index} scientist={scientist} />
+        ))}
+      </div>
   );
 }
diff --git a/src/pages/qcomps/list_keys_id.js b/src/pages/qcomps/list_keys_id.js
index f10c9b88..bd9e4b97 100644
--- a/src/pages/qcomps/list_keys_id.js
+++ b/src/pages/qcomps/list_keys_id.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -13,12 +15,25 @@ export const people = [{
 }];
 
 function getImageUrl(imageId) {
-    return "https://i.imgur.com/" + imageId + "s.jpg"
+  return "https://i.imgur.com/" + imageId + "s.jpg"
 }
+
 export default function List() {
-  const listItems = people.map(person =>
-    <li>
-    </li>
-  );
+  const listItems = people.map(person => (
+      <li key={person.id}>
+        <img
+            src={getImageUrl(person.imageId)}
+            alt={person.name}
+            width={70}
+            height={70}
+        />
+        <div>
+          <h2>{person.name}</h2>
+          <p><b>Profession:</b> {person.profession}</p>
+          <p><b>Accomplishment:</b> {person.accomplishment}</p>
+        </div>
+      </li>
+  ));
+
   return <ul>{listItems}</ul>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/qcomps/menuBar.js b/src/pages/qcomps/menuBar.js
index 0fb8894e..c52b46db 100644
--- a/src/pages/qcomps/menuBar.js
+++ b/src/pages/qcomps/menuBar.js
@@ -1,24 +1,27 @@
+import React from 'react';
+
 export default function MenuBar() {
-  return (
-    <div>
-      <AButton id="btn1" color="red" size="50px">
-        Button 1
-      </AButton>
-      <AButton id="btn2" color="green" size="30px">
-        Button 2
-      </AButton>
-    </div>
-  );
+    return (
+        <div>
+            <AButton id="btn1" color="red" size="50px">
+                Button 1
+            </AButton>
+            <AButton id="btn2" color="green" size="30px">
+                Button 2
+            </AButton>
+        </div>
+    );
 }
 
-function AButton() {
-  const handleClick = () => {
-    document.getElementById(`${id}`).style.backgroundColor = color;
-    document.getElementById(`${id}`).style.fontSize = size;
-  }
-  return (
-    <button id={`${id}`} onClick={handleClick}>
-      {children}
-    </button>
-  );
+function AButton({ id, color, size, children }) {
+    const handleClick = () => {
+        document.getElementById(`${id}`).style.backgroundColor = color;
+        document.getElementById(`${id}`).style.fontSize = size;
+    };
+
+    return (
+        <button id={id} onClick={handleClick}>
+            {children}
+        </button>
+    );
 }
diff --git a/src/pages/qcomps/profile_mistake.js b/src/pages/qcomps/profile_mistake.js
index ac318d70..f2a3fd7d 100644
--- a/src/pages/qcomps/profile_mistake.js
+++ b/src/pages/qcomps/profile_mistake.js
@@ -1,4 +1,5 @@
-export default function profile() {
-    return
-        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+export default function Profile() {
+    return (
+        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />
+    );
 }
diff --git a/src/pages/qcomps/props_item.js b/src/pages/qcomps/props_item.js
index 79a9e151..2b8ccd43 100644
--- a/src/pages/qcomps/props_item.js
+++ b/src/pages/qcomps/props_item.js
@@ -2,27 +2,27 @@ function Item({ name, isPacked }) {
   if (isPacked) {
     return <li className="item">{name} ✔</li>;
   }
-  return <li className="item"> {name} </li>
+  return <li className="item">{name}</li>;
 }
 
 export default function PackingList() {
   return (
-    <section>
-      <h1>My Packing List</h1>
-      <ul>
-        <Item
-          isPacked={false}
-          name="Laptop"
-        />
-        <Item
-          isPacked={true}
-          name="Chargers"
-        />
-        <Item
-          isPacked={true}
-          name="Socks"
-        />
-      </ul>
-    </section>
+      <section>
+        <h1>My Packing List</h1>
+        <ul>
+          <Item
+              isPacked={false}
+              name="Laptop"
+          />
+          <Item
+              isPacked={true}
+              name="Chargers"
+          />
+          <Item
+              isPacked={true}
+              name="Socks"
+          />
+        </ul>
+      </section>
   );
 }
diff --git a/src/pages/qcomps/recipes.js b/src/pages/qcomps/recipes.js
index 37803925..100bd847 100644
--- a/src/pages/qcomps/recipes.js
+++ b/src/pages/qcomps/recipes.js
@@ -1,22 +1,23 @@
-export const recipes = [{
-  id: 'greek-salad',
-  name: 'Greek Salad',
-  ingredients: new Set(['tomatoes', 'cucumber', 'onion', 'olives', 'feta'])
-}, {
-  id: 'hawaiian-pizza',
-  name: 'Hawaiian Pizza',
-  ingredients: new Set(['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'])
-}, {
-  id: 'hummus',
-  name: 'Hummus',
-  ingredients: new Set(['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'])
-}];
+import React from 'react';
+import { recipes } from './recipes'; // Import the recipes array
 
 export default function RecipeList() {
   return (
-    <div>
-      <h1>Recipes</h1>
-      {}
-    </div>
+      <div>
+        <h1>Recipes</h1>
+        <ul>
+          {recipes.map(recipe => (
+              <li key={recipe.id}>
+                <h2>{recipe.name}</h2>
+                <h3>Ingredients:</h3>
+                <ul>
+                  {Array.from(recipe.ingredients).map((ingredient, index) => (
+                      <li key={index}>{ingredient}</li>
+                  ))}
+                </ul>
+              </li>
+          ))}
+        </ul>
+      </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/qcomps/shoppingCart.js b/src/pages/qcomps/shoppingCart.js
index d26decf8..b9adbe78 100644
--- a/src/pages/qcomps/shoppingCart.js
+++ b/src/pages/qcomps/shoppingCart.js
@@ -1,33 +1,27 @@
 import { useState } from 'react';
 
 export default function RequestTracker() {
-  const [pending, setPending] = useState(0);
-  const [completed, setCompleted] = useState(0);
+    const [pending, setPending] = useState(0);
+    const [completed, setCompleted] = useState(0);
 
-  async function handleClick() {
-    setPending(pending + 1);
-    await delay(3000);
-    setPending(pending - 1);
-    setCompleted(completed + 1);
-  }
+    async function handleClick() {
+        setPending(prevPending => prevPending + 1); // Update pending using functional form
+        await delay(3000);
+        setPending(prevPending => prevPending - 1); // Update pending using functional form
+        setCompleted(prevCompleted => prevCompleted + 1); // Update completed using functional form
+    }
 
-  return (
-    <>
-      <h3>
-        Pending: {pending}
-      </h3>
-      <h3>
-        Completed: {completed}
-      </h3>
-      <button onClick={handleClick}>
-        Buy
-      </button>
-    </>
-  );
+    return (
+        <>
+            <h3>Pending: {pending}</h3>
+            <h3>Completed: {completed}</h3>
+            <button onClick={handleClick}>Buy</button>
+        </>
+    );
 }
 
 function delay(ms) {
-  return new Promise(resolve => {
-    setTimeout(resolve, ms);
-  });
-}
\ No newline at end of file
+    return new Promise(resolve => {
+        setTimeout(resolve, ms);
+    });
+}
diff --git a/src/pages/qcomps/snapshot.js b/src/pages/qcomps/snapshot.js
index 2c3c9801..5bd06c4a 100644
--- a/src/pages/qcomps/snapshot.js
+++ b/src/pages/qcomps/snapshot.js
@@ -1,15 +1,15 @@
 import { useState } from 'react';
 
 export default function Counter() {
-  const [number, setNumber] = useState(0);
+    const [number, setNumber] = useState(0);
 
-  return (
-    <>
-      <h1>{number}</h1>
-      <button onClick={() => {
-        setNumber(number + 5);
-        alert(number);
-      }}>+5</button>
-    </>
-  )
+    return (
+        <>
+            <h1>{number}</h1>
+            <button onClick={() => {
+                setNumber(prevNumber => prevNumber + 5); // Use functional update
+                alert(number); // This will show the previous value of number
+            }}>+5</button>
+        </>
+    )
 }
diff --git a/src/pages/qcomps/state.js b/src/pages/qcomps/state.js
index 35953a6a..e2b9eafc 100644
--- a/src/pages/qcomps/state.js
+++ b/src/pages/qcomps/state.js
@@ -1,39 +1,40 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { sculptureList } from '../../data/data.js';
 
 export default function Gallery() {
-  const [index, setIndex] = useState(0);
-  const [showMore, setShowMore] = useState(false);
+    const [index, setIndex] = useState(0);
+    const [showMore, setShowMore] = useState(false);
 
-  function handleNextClick() {
-    setIndex(index + 1);
-  }
+    function handleNextClick() {
+        const newIndex = index + 1;
+        setIndex(newIndex >= sculptureList.length ? 0 : newIndex);
+    }
 
-  function handleMoreClick() {
-    setShowMore(!showMore);
-  }
+    function handleMoreClick() {
+        setShowMore(!showMore);
+    }
 
-  let sculpture = sculptureList[index];
-  return (
-    <>
-      <button onClick={handleNextClick}>
-        Next
-      </button>
-      <h2>
-        <i>{sculpture.name} </i>
-        by {sculpture.artist}
-      </h2>
-      <h3>
-        ({index + 1} of {sculptureList.length})
-      </h3>
-      <button onClick={handleMoreClick}>
-        {showMore ? 'Hide' : 'Show'} details
-      </button>
-      {showMore && <p>{sculpture.description}</p>}
-      <img
-        src={sculpture.url}
-        alt={sculpture.alt}
-      />
-    </>
-  );
-}
\ No newline at end of file
+    const sculpture = sculptureList[index];
+
+    return (
+        <>
+            <button onClick={handleNextClick}>
+                {index === sculptureList.length - 1 ? 'Restart' : 'Next'}
+            </button>
+            <h2>
+                <i>{sculpture.name}</i> by {sculpture.artist}
+            </h2>
+            <h3>
+                ({index + 1} of {sculptureList.length})
+            </h3>
+            <button onClick={handleMoreClick}>
+                {showMore ? 'Hide details' : 'Show details'}
+            </button>
+            {showMore && <p>{sculpture.description}</p>}
+            <img
+                src={sculpture.url}
+                alt={sculpture.alt}
+            />
+        </>
+    );
+}
diff --git a/src/pages/qcomps/stuckForm.js b/src/pages/qcomps/stuckForm.js
index 7cc952e0..977ed8e2 100644
--- a/src/pages/qcomps/stuckForm.js
+++ b/src/pages/qcomps/stuckForm.js
@@ -1,36 +1,36 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 export default function Form() {
-  let firstName = '';
-  let lastName = '';
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
 
-  function handleFirstNameChange(e) {
-    firstName = e.target.value;
-  }
+    function handleFirstNameChange(e) {
+        setFirstName(e.target.value);
+    }
 
-  function handleLastNameChange(e) {
-    lastName = e.target.value;
-  }
+    function handleLastNameChange(e) {
+        setLastName(e.target.value);
+    }
 
-  function handleReset() {
-    firstName = '';
-    lastName = '';
-  }
+    function handleReset() {
+        setFirstName('');
+        setLastName('');
+    }
 
-  return (
-    <form onSubmit={e => e.preventDefault()}>
-      <input
-        placeholder="First name"
-        value={firstName}
-        onChange={handleFirstNameChange}
-      />
-      <input
-        placeholder="Last name"
-        value={lastName}
-        onChange={handleLastNameChange}
-      />
-      <h1>Hi, {firstName} {lastName}</h1>
-      <button onClick={handleReset}>Reset</button>
-    </form>
-  );
+    return (
+        <form onSubmit={e => e.preventDefault()}>
+            <input
+                placeholder="First name"
+                value={firstName}
+                onChange={handleFirstNameChange}
+            />
+            <input
+                placeholder="Last name"
+                value={lastName}
+                onChange={handleLastNameChange}
+            />
+            <h1>Hi, {firstName} {lastName}</h1>
+            <button onClick={handleReset}>Reset</button>
+        </form>
+    );
 }
diff --git a/src/pages/qcomps/thankYouCrash.js b/src/pages/qcomps/thankYouCrash.js
index 07e1ba52..4e219442 100644
--- a/src/pages/qcomps/thankYouCrash.js
+++ b/src/pages/qcomps/thankYouCrash.js
@@ -1,26 +1,26 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 export default function FeedbackForm() {
   const [isSent, setIsSent] = useState(false);
+  const [message, setMessage] = useState('');
+
   if (isSent) {
     return <h1>Thank you!</h1>;
   } else {
-    // eslint-disable-next-line
-    const [message, setMessage] = useState('');
     return (
-      <form onSubmit={e => {
-        e.preventDefault();
-        alert(`Sending: "${message}"`);
-        setIsSent(true);
-      }}>
+        <form onSubmit={e => {
+          e.preventDefault();
+          alert(`Sending: "${message}"`);
+          setIsSent(true);
+        }}>
         <textarea
-          placeholder="Message"
-          value={message}
-          onChange={e => setMessage(e.target.value)}
+            placeholder="Message"
+            value={message}
+            onChange={e => setMessage(e.target.value)}
         />
-        <br />
-        <button type="submit">Send</button>
-      </form>
+          <br />
+          <button type="submit">Send</button>
+        </form>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/qcomps/todos.js b/src/pages/qcomps/todos.js
index 99713488..0ec5d72f 100644
--- a/src/pages/qcomps/todos.js
+++ b/src/pages/qcomps/todos.js
@@ -1,22 +1,24 @@
+import React from 'react';
+
 const baseUrl = 'https://i.imgur.com/';
 const person = {
-  name: 'Gregorio Y. Zara',
-  imageId: '7vQD0fP',
-  imageSize: 's',
-  theme: {
-    backgroundColor: 'black',
-    color: 'pink'
-  }
+    name: 'Gregorio Y. Zara',
+    imageId: '7vQD0fP',
+    imageSize: 's',
+    theme: {
+        backgroundColor: 'black',
+        color: 'pink'
+    }
 };
 
 export default function TodoList() {
-  return (
-    <div style={person.theme}>
-      <h1>Person Name's Todos</h1>
-      <img className="avatar"
-      src="baseURL + imageID + imageSize + .jpg"
-      alt="Person's Name"
-      />
-    </div>
-  );
+    const { name, imageId, imageSize, theme } = person;
+    const imageUrl = `${baseUrl}${imageId}${imageSize}.jpg`;
+
+    return (
+        <div style={theme}>
+            <h1>{name}'s Todos</h1>
+            <img className="avatar" src={imageUrl} alt={name} />
+        </div>
+    );
 }
diff --git a/src/pages/qcomps/updObjectsForm.js b/src/pages/qcomps/updObjectsForm.js
index c0df1e82..bee73e69 100644
--- a/src/pages/qcomps/updObjectsForm.js
+++ b/src/pages/qcomps/updObjectsForm.js
@@ -8,7 +8,10 @@ export default function Scoreboard() {
   });
 
   function handlePlusClick() {
-    player.likescore++;
+    setPlayer(prevPlayer => ({
+      ...prevPlayer,
+      likescore: prevPlayer.likescore + 1,
+    }));
   }
 
   function handleFirstNameChange(e) {
@@ -20,33 +23,32 @@ export default function Scoreboard() {
 
   function handleLastNameChange(e) {
     setPlayer({
-      lastName: e.target.value
+      ...player,
+      lastName: e.target.value,
     });
   }
 
   return (
-    <>
-      <label>
-        Like Score: <b>{player.likescore}</b>
-        {'  '}
-        <button onClick={handlePlusClick}>
-          +1
-        </button>
-      </label>
-      <label>
-        First name:
-        <input
-          value={player.firstName}
-          onChange={handleFirstNameChange}
-        />
-      </label>
-      <label>
-        Last name:
-        <input
-          value={player.lastName}
-          onChange={handleLastNameChange}
-        />
-      </label>
-    </>
+      <>
+        <label>
+          Like Score: <b>{player.likescore}</b>
+          {'  '}
+          <button onClick={handlePlusClick}>+1</button>
+        </label>
+        <label>
+          First name:
+          <input
+              value={player.firstName}
+              onChange={handleFirstNameChange}
+          />
+        </label>
+        <label>
+          Last name:
+          <input
+              value={player.lastName}
+              onChange={handleLastNameChange}
+          />
+        </label>
+      </>
   );
 }