ex2.10 modulize component

1 files changed, 28 insertions, 19 deletions

diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
index 593018a..fd79a34 100644
--- a/part2/phonebook/src/App.js
+++ b/part2/phonebook/src/App.js
@@ -1,5 +1,28 @@
+// Extract form element into its own component
 import { useState } from 'react'
 
+const ShowPerson = (props) => {
+      const searchTerm = props.searchTerm
+      const persons = props.persons
+      if (searchTerm === undefined)  {
+        return persons.map( (person) => {
+          return (<li key={person.id}>{person.name} {person.phoneNumber}</li>)})
+      } else {
+          const searchedList = persons.filter( (person) =>
+            {return person.name.includes(props.searchTerm)});
+          console.log(searchedList)
+          return searchedList.map( (searched) => {
+            return (<li key={searched.id}>{searched.name} {searched.phoneNumber}</li>)
+          } )
+      }
+  }
+
+const Filter = (props) => {
+  return (
+    <p>filter shown with <input value={props.searchTerm} onChange={(event) =>
+      props.setSearchTerm(event.target.value)} /></p>
+  )
+}
 
 const App = () => {
   const [persons, setPersons] = useState([
@@ -35,29 +58,14 @@ const App = () => {
     setPhoneNumber(event.target.value)
   }
 
-  const handleSearch = (event) => {
-    setSearchTerm(event.target.value)
-  }
-
-  const ShowPerson = () => {
-      if (searchTerm === undefined)  {
-        return persons.map( (person) => {
-          return (<li key={person.id}>{person.name} {person.phoneNumber}</li>)})
-      } else {
-          const searchedList = persons.filter( (person) =>
-            {return person.name.includes(searchTerm)});
-          console.log(searchedList)
-          return searchedList.map( (searched) => {
-            return (<li key={searched.id}>{searched.name} {searched.phoneNumber}</li>)
-          } )
-      }
-  }
   
+    
 
   return (
     <div>
       <h2>Phonebook</h2>
-      <p>filter shown with <input value={searchTerm} onChange={handleSearch} /></p>
+      <Filter searchTerm={searchTerm} setSearchTerm={setSearchTerm}/>
+      
       <h2> add new contact </h2>
       <form onSubmit={addContact}>
         <div>
@@ -69,7 +77,8 @@ const App = () => {
         </div>
       </form>
       <h2>Numbers</h2>
-      <ShowPerson/>
+      <ShowPerson searchTerm={searchTerm} persons={persons} 
+        />
     </div>
   )
 }