refactored into componenets, completed 2.1

parts/2/phoneBook/src/App.jsx

@@ -9,6 +9,30 @@ const SearchArea = ({ onChangeHandler }) => {
   );
 };
 
+const AddPersonForm = ({
+  onSubmitHandler,
+  onNameChangeHandler,
+  nameValue,
+  onNumberChangeHandler,
+  numberValue,
+}) => {
+  return (
+    <>
+      <form onSubmit={onSubmitHandler}>
+        <div>
+          name: <input value={nameValue} onChange={onNameChangeHandler} />
+        </div>
+        <div>
+          number: <input value={numberValue} onChange={onNumberChangeHandler} />
+        </div>
+        <div>
+          <button type="submit">add</button>
+        </div>
+      </form>
+    </>
+  );
+};
+
 const App = () => {
   const [persons, setPersons] = useState([
     { name: "Arto Hellas", number: 123 },
@@ -50,17 +74,13 @@ const App = () => {
       <h2>Phonebook</h2>
       <SearchArea onChangeHandler={handleSearchChange} />
       <h3>Add new</h3>
-      <form onSubmit={handleOnSubmit}>
+      <AddPersonForm
-        <div>
+        onSubmitHandler={handleOnSubmit}
-          name: <input value={newName} onChange={handleNameChange} />
+        onNameChangeHandler={handleNameChange}
-        </div>
+        nameValue={newName}
-        <div>
+        onNumberChangeHandler={handleNumberChange}
-          number: <input value={newNumber} onChange={handleNumberChange} />
+        numberValue={newNumber}
-        </div>
+      />
-        <div>
-          <button type="submit">add</button>
-        </div>
-      </form>
       <h3>Numbers</h3>
       <PersonList
         persons={persons.filter((person) =>