From 6ae16c9b9ac8ad25ce6b3e7a0e65b45cb3484544 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sun, 25 May 2025 12:08:25 +0200
Subject: [PATCH] extract search area

---
 parts/2/phoneBook/src/App.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/parts/2/phoneBook/src/App.jsx b/parts/2/phoneBook/src/App.jsx
index a61b6cf..858c1f6 100644
--- a/parts/2/phoneBook/src/App.jsx
+++ b/parts/2/phoneBook/src/App.jsx
@@ -1,6 +1,14 @@
 import { useState } from "react";
 import PersonList from "./components/PersonList";
 
+const SearchArea = ({ onChangeHandler }) => {
+  return (
+    <div>
+      search name: <input onChange={onChangeHandler} />
+    </div>
+  );
+};
+
 const App = () => {
   const [persons, setPersons] = useState([
     { name: "Arto Hellas", number: 123 },
@@ -40,9 +48,7 @@ const App = () => {
   return (
     <div>
       <h2>Phonebook</h2>
-      <div>
-        search name: <input onChange={handleSearchChange} />
-      </div>
+      <SearchArea onChangeHandler={handleSearchChange} />
       <h3>Add new</h3>
       <form onSubmit={handleOnSubmit}>
         <div>