2.6 completed

parts/2/notes.md

@@ -4,8 +4,7 @@ Exercises:
 * [X] 2.3
 * [X] 2.4
 * [X] 2.5
-* [ ] 2.5
+* [X] 2.6
-* [ ] 2.6
 * [ ] 2.7
 * [ ] 2.8
 * [ ] 2.9

parts/2/phoneBook/src/App.jsx

@@ -1,22 +1,32 @@
 import { useState } from "react";
+import PersonList from "./components/PersonList";
 
 const App = () => {
   const [persons, setPersons] = useState([{ name: "Arto Hellas" }]);
   const [newName, setNewName] = useState("");
 
+  const handleOnSubmit = (event) => {
+    event.preventDefault();
+    setPersons(persons.concat({ name: [newName] }));
+  };
+
+  const handleNameChange = (event) => {
+    setNewName(event.target.value);
+  };
+
   return (
     <div>
       <h2>Phonebook</h2>
-      <form>
+      <form onSubmit={handleOnSubmit}>
         <div>
-          name: <input />
+          name: <input onChange={handleNameChange} />
         </div>
         <div>
           <button type="submit">add</button>
         </div>
       </form>
       <h2>Numbers</h2>
-      ...
+      <PersonList persons={persons} />
     </div>
   );
 };

parts/2/phoneBook/src/components/PersonList.jsx

@@ -0,0 +1,16 @@
+const PersonList = ({ persons }) => {
+  console.log("the list");
+  console.log(persons);
+
+  return (
+    <>
+      <ul>
+        {persons.map((person) => {
+          return <li id={person.name}>{person.name}</li>;
+        })}
+      </ul>
+    </>
+  );
+};
+
+export default PersonList;