diff options
| -rw-r--r-- | part2/phonebook/src/App.js | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js index 2843875..15f9636 100644 --- a/part2/phonebook/src/App.js +++ b/part2/phonebook/src/App.js @@ -5,7 +5,7 @@ const ShowPerson = (props) => { return ( <ol> {persons.map( (person) => { - return (<li key={person.id}>{person.name}</li>) + return (<li key={person.id}>{person.name} {person.phoneNumber}</li>) } )} </ol> ) @@ -13,9 +13,10 @@ const ShowPerson = (props) => { const App = () => { const [persons, setPersons] = useState([ - { name: 'Arto Hellas' } + { name: 'Arto Hellas', phoneNumber: '000-000-0000' } ]) const [newName, setNewName] = useState('') + const [phoneNumber, setPhoneNumber] = useState('') const addContact = (event) => { event.preventDefault() @@ -26,14 +27,19 @@ const App = () => { const newPerson = { name: newName, id: persons.length + 1, + phoneNumber: phoneNumber, } setPersons(persons.concat(newPerson)) }} const handleTypedName = (event) => { - console.log(event.target.value) + //console.log(event.target.value) setNewName(event.target.value) - console.log(newName) + //console.log(newName) + } + + const handlePhoneNo = (event) => { + setPhoneNumber(event.target.value) } return ( @@ -41,7 +47,8 @@ const App = () => { <h2>Phonebook</h2> <form onSubmit={addContact}> <div> - name: <input value={newName} onChange={handleTypedName} /> + <p>name: <input value={newName} onChange={handleTypedName} /></p> + <p>number: <input value={phoneNumber} onChange={handlePhoneNo} /></p> </div> <div> <button type="submit">add</button> |