From 608aefe8e23feab74b67ecdfb3e8d9d76ca96142 Mon Sep 17 00:00:00 2001
From: Thuan Bui <thuanbui87@gmail.com>
Date: Fri, 27 Aug 2021 22:40:46 +0700
Subject: [PATCH] Completed 2.9 (phonebook step 4)

---
 part2/2.6-2.10/src/App.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/part2/2.6-2.10/src/App.js b/part2/2.6-2.10/src/App.js
index c61e0ff..ced4987 100644
--- a/part2/2.6-2.10/src/App.js
+++ b/part2/2.6-2.10/src/App.js
@@ -2,13 +2,14 @@ import React, { useState } from 'react'
 
 const App = () => {
   const [ persons, setPersons ] = useState([
-    { name: 'Arto Hellas',
-      number: '040-123457',
-      id: 1
-  }
+    { name: 'Arto Hellas', number: '040-123456' },
+    { name: 'Ada Lovelace', number: '39-44-5323523' },
+    { name: 'Dan Abramov', number: '12-43-234345' },
+    { name: 'Mary Poppendieck', number: '39-23-6423122' }
   ]) 
   const [ newName, setNewName ] = useState('')
   const [ newNumber, setNewNumber ] = useState('')
+  const [ newSearch, setNewSearch ] = useState('')
 
   const handleNameChange = (event) => {
     //console.log(event.target.value)
@@ -20,6 +21,12 @@ const App = () => {
     setNewNumber(event.target.value)
   }
 
+  const handleSearchChange = (event) => {
+    setNewSearch(event.target.value)
+   
+  }
+  
+
   const submitChange = (event) => {
     event.preventDefault()
     const newPerson = {
@@ -35,10 +42,15 @@ const App = () => {
     setNewNumber('')
     setNewName('')
   }
+  
+  const search = persons.filter(person => person.name.includes(newSearch))
 
   return (
     <div>
       <h2>Phonebook</h2>
+      <div>Serach <input value={newSearch} onChange={handleSearchChange}/>
+      </div>
+      <h2>Add new contact</h2>
       <form onSubmit={submitChange}>
         <div>
           name: <input value={newName} onChange={handleNameChange}/>
@@ -52,7 +64,8 @@ const App = () => {
       
       <h2>Numbers</h2>
       <ul>
-        {persons.map(person => <li key={person.id}>{person.name}: {person.number}</li>)}
+        {search.map(person => <li key={person.name}>{person.name}: {person.number}</li>)}
+        
       </ul>
     </div>
   )