Completed 2.10 (phonebook step 5)

part2/2.6-2.10/src/App.js

@@ -1,4 +1,7 @@
 import React, { useState } from 'react'
+import Filter from './components/Filter'
+import PersonForm from './components/PersonForm'
+import Person from './components/Person'
 
 const App = () => {
   const [ persons, setPersons ] = useState([
@@ -26,7 +29,6 @@ const App = () => {
    
   }
   
-
   const submitChange = (event) => {
     event.preventDefault()
     const newPerson = {
@@ -41,32 +43,22 @@ const App = () => {
 
     setNewNumber('')
     setNewName('')
+    setNewSearch('')
   }
 
-  const search = persons.filter(person => person.name.includes(newSearch))
+  const search = persons.filter(person => person.name.toLowerCase().includes(newSearch.toLowerCase()))
 
   return (
     <div>
       <h2>Phonebook</h2>
-      <div>Serach <input value={newSearch} onChange={handleSearchChange}/>
-      </div>
+      <Filter value={newSearch} onChange={handleSearchChange} />
+      
       <h2>Add new contact</h2>
-      <form onSubmit={submitChange}>
-        <div>
-          name: <input value={newName} onChange={handleNameChange}/>
-        </div>
-        <div>number: <input type="tel" value={newNumber} onChange={handleNumberChange}/>
-        </div>
-        <div>
-          <button type="submit">add</button>
-        </div>
-      </form>
+      <PersonForm onSubmit={submitChange} name={newName} number={newNumber} handleNumberChange={handleNumberChange} handleNameChange={handleNameChange}/>
       
       <h2>Numbers</h2>
-      <ul>
-        {search.map(person => <li key={person.name}>{person.name}: {person.number}</li>)}
+      <Person data={search} />
       
-      </ul>
     </div>
   )
 }

part2/2.6-2.10/src/components/Filter.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Filter = ({value, onChange}) => {
+    return (
+        <div>Search <input value={value} onChange={onChange}/>
+        </div>
+    )
+}
+
+export default Filter

part2/2.6-2.10/src/components/Person.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Person = ({data}) => {
+    return (
+        <ul>
+            {data.map(person => <li key={person.name}>{person.name}: {person.number}</li>)}
+        </ul>
+    )
+}
+
+export default Person

part2/2.6-2.10/src/components/PersonForm.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const PersonForm = ({onSubmit, name, number, handleNumberChange, handleNameChange }) => {
+    return (
+        <form onSubmit={onSubmit}>
+        <div>
+          name: <input value={name} onChange={handleNameChange}/>
+        </div>
+        <div>number: <input type="tel" value={number} onChange={handleNumberChange}/>
+        </div>
+        <div>
+          <button type="submit">add</button>
+        </div>
+      </form>
+    )
+}
+
+export default PersonForm