aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-30 11:56:29 -0400
committerIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-30 11:56:29 -0400
commit7820cb0777d9d4c0479a926a06811c945f35654f (patch)
tree5fec7addd4eedbd0aa6b21978f0334c43398959a
parentb5dce51a8516ac1ef05be044d59e2cb9626b854b (diff)
ex2.8 handle phone numbers
-rw-r--r--part2/phonebook/src/App.js17
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>