fullstackopen-notes/parts/2/phoneBook/src/App.jsx

import { useState } from "react";
import PersonList from "./components/PersonList";

const App = () => {
  const [persons, setPersons] = useState([{ name: "Arto Hellas" }]);
  const [newName, setNewName] = useState("");

  const handleOnSubmit = (event) => {
    event.preventDefault();
    setPersons(persons.concat({ name: [newName] }));
  };

  const handleNameChange = (event) => {
    setNewName(event.target.value);
  };

  return (
    <div>
      <h2>Phonebook</h2>
      <form onSubmit={handleOnSubmit}>
        <div>
          name: <input onChange={handleNameChange} />
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <h2>Numbers</h2>
      <PersonList persons={persons} />
    </div>
  );
};

export default App;