From 5b33d34f0a8c5143f02feb2ae9be90b3f8558332 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sun, 25 May 2025 11:55:15 +0200
Subject: [PATCH] completed 2.8

---
 parts/2/notes.md                                |  2 +-
 parts/2/phoneBook/src/App.jsx                   | 14 ++++++++++++--
 parts/2/phoneBook/src/components/PersonList.jsx |  6 +++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/parts/2/notes.md b/parts/2/notes.md
index 768dbe5..3c27c8f 100644
--- a/parts/2/notes.md
+++ b/parts/2/notes.md
@@ -6,6 +6,6 @@ Exercises:
 * [X] 2.5
 * [X] 2.6
 * [X] 2.7
-* [ ] 2.8
+* [X] 2.8
 * [ ] 2.9
 * [ ] 2.10
diff --git a/parts/2/phoneBook/src/App.jsx b/parts/2/phoneBook/src/App.jsx
index a84871d..16dbd74 100644
--- a/parts/2/phoneBook/src/App.jsx
+++ b/parts/2/phoneBook/src/App.jsx
@@ -2,8 +2,11 @@ import { useState } from "react";
 import PersonList from "./components/PersonList";
 
 const App = () => {
-  const [persons, setPersons] = useState([{ name: "Arto Hellas" }]);
+  const [persons, setPersons] = useState([
+    { name: "Arto Hellas", number: 123 },
+  ]);
   const [newName, setNewName] = useState("");
+  const [newNumber, setNewNumber] = useState("");
 
   const handleOnSubmit = (event) => {
     event.preventDefault();
@@ -15,13 +18,17 @@ const App = () => {
       alert(`${newName} is already in the phonebook.`);
       return;
     }
-    setPersons(persons.concat({ name: newName }));
+    setPersons(persons.concat({ name: newName, number: newNumber }));
   };
 
   const handleNameChange = (event) => {
     setNewName(event.target.value);
   };
 
+  const handleNumberChange = (event) => {
+    setNewNumber(event.target.value);
+  };
+
   return (
     <div>
       <h2>Phonebook</h2>
@@ -29,6 +36,9 @@ const App = () => {
         <div>
           name: <input onChange={handleNameChange} />
         </div>
+        <div>
+          number: <input onChange={handleNumberChange} />
+        </div>
         <div>
           <button type="submit">add</button>
         </div>
diff --git a/parts/2/phoneBook/src/components/PersonList.jsx b/parts/2/phoneBook/src/components/PersonList.jsx
index 80da3a4..7025008 100644
--- a/parts/2/phoneBook/src/components/PersonList.jsx
+++ b/parts/2/phoneBook/src/components/PersonList.jsx
@@ -3,7 +3,11 @@ const PersonList = ({ persons }) => {
     <>
       <ul>
         {persons.map((person) => {
-          return <li key={person.name}>{person.name}</li>;
+          return (
+            <li key={person.name}>
+              {person.name} --- {person.number}
+            </li>
+          );
         })}
       </ul>
     </>