Upload 2.10

part2/phonebook/src/components/Filter.js

@@ -0,0 +1,9 @@
+const Filter = ({ filter, filterByName }) => {
+  return (
+    <p>
+      filter shown with <input value={filter} onChange={filterByName} />
+    </p>
+  );
+};
+
+export default Filter;

part2/phonebook/src/components/Person.js

@@ -0,0 +1,9 @@
+const Person = ({ person }) => {
+  return (
+    <div>
+      {person.name} {person.number}
+    </div>
+  );
+};
+
+export default Person;

part2/phonebook/src/components/PersonForm.js

@@ -0,0 +1,19 @@
+const PersonForm = ({ addPerson, newPerson, handleChange }) => {
+  return (
+    <form onSubmit={addPerson}>
+      <div>
+        name:{" "}
+        <input name="name" value={newPerson.name} onChange={handleChange} />
+      </div>
+      <div>
+        number:{" "}
+        <input name="number" value={newPerson.number} onChange={handleChange} />
+      </div>
+      <div>
+        <button type="submit">add</button>
+      </div>
+    </form>
+  );
+};
+
+export default PersonForm;

part2/phonebook/src/components/ShowPersons.js

@@ -0,0 +1,13 @@
+import Person from "./Person";
+
+const ShowPersons = ({ showedPersons }) => {
+  return (
+    <div>
+      {showedPersons.map((person) => (
+        <Person key={person.name} person={person} />
+      ))}
+    </div>
+  );
+};
+
+export default ShowPersons;