aboutsummaryrefslogtreecommitdiff
path: root/part2/phonebook/src/App.js
diff options
context:
space:
mode:
Diffstat (limited to 'part2/phonebook/src/App.js')
-rw-r--r--part2/phonebook/src/App.js53
1 files changed, 53 insertions, 0 deletions
diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
new file mode 100644
index 0000000..2e430f9
--- /dev/null
+++ b/part2/phonebook/src/App.js
@@ -0,0 +1,53 @@
+import { useState } from 'react'
+
+const ShowPerson = (props) => {
+ const persons = props.persons
+ return (
+ <ol>
+ {persons.map( (person) => {
+ return (<li key={person.id}>{person.name}</li>)
+ } )}
+ </ol>
+ )
+}
+
+const App = () => {
+ const [persons, setPersons] = useState([
+ { name: 'Arto Hellas' }
+ ])
+ const [newName, setNewName] = useState('')
+
+ const addNumber = (event) => {
+ event.preventDefault()
+ console.log(newName, persons)
+ const newPerson = {
+ name: newName,
+ id: persons.length + 1,
+ }
+ setPersons(persons.concat(newPerson))
+ }
+
+ const handleTypedName = (event) => {
+ console.log(event.target.value)
+ setNewName(event.target.value)
+ console.log(newName)
+ }
+
+ return (
+ <div>
+ <h2>Phonebook</h2>
+ <form onSubmit={addNumber}>
+ <div>
+ name: <input value={newName} onChange={handleTypedName} />
+ </div>
+ <div>
+ <button type="submit">add</button>
+ </div>
+ </form>
+ <h2>Numbers</h2>
+ <ShowPerson persons={persons}/>
+ </div>
+ )
+}
+
+export default App