Completed 2.8 (phonebook step3)

part2/2.6-2.10/src/App.js

@@ -2,26 +2,37 @@ import React, { useState } from 'react'
 
 const App = () => {
   const [ persons, setPersons ] = useState([
-    { name: 'Arto Hellas' }
+    { name: 'Arto Hellas',
+      number: '040-123457',
+      id: 1
+  }
   ]) 
   const [ newName, setNewName ] = useState('')
+  const [ newNumber, setNewNumber ] = useState('')
 
   const handleNameChange = (event) => {
     //console.log(event.target.value)
     setNewName(event.target.value)
   }
 
+  const handleNumberChange = (event) => {
+    //console.log(event.target.value)
+    setNewNumber(event.target.value)
+  }
+
   const submitChange = (event) => {
     event.preventDefault()
     const newPerson = {
-      name: newName
+      name: newName,
+      number: newNumber,
+      id: persons.length + 1
     }
 
     // Check if newName already added to phonebook or not
     const check = persons.filter(person => person.name === newName )
     check.length === 0 ? setPersons(persons.concat(newPerson)) : alert(`${newName} is already added to phonebook`)
 
-    
+    setNewNumber('')
     setNewName('')
   }
 
@@ -32,6 +43,8 @@ const App = () => {
         <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>
@@ -39,7 +52,7 @@ const App = () => {
       
       <h2>Numbers</h2>
       <ul>
-        {persons.map(person => <li key={person.name}>{person.name}</li>)}
+        {persons.map(person => <li key={person.id}>{person.name}: {person.number}</li>)}
       </ul>
     </div>
   )