completed 2.8

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>

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>
     </>