ex2.6 phonebook base

2 files changed, 63 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
diff --git a/part2/phonebook/src/index.js b/part2/phonebook/src/index.js
new file mode 100644
index 0000000..68a05ff
--- /dev/null
+++ b/part2/phonebook/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <App />
+)
+