Completed 2.9 (phonebook step 4)

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>
   )