gistfile1.txt

import React, { useState } from 'react'

const PersonForm = props => {
  console.log('props', props)
  return (
    <form onSubmit={props.handleSubmit}>
      <div>
        Name:
        <input
          name="name"
          type="text"
          value={props.input.name}
          onChange={props.handleChange}
        />
      </div>
      <div>
        Number:
        <input
          name="number"
          type="text"
          value={props.input.number}
          onChange={props.handleChange}
        />
      </div>
      <div>
        <button type="submit">Add</button>
      </div>
      <hr />
      {props.persons.map(p => (
        <p key={p.name}>
          {p.name}---{p.number}
        </p>
      ))}
    </form>
  )
}

const App = () => {
  const [persons, setPersons] = useState([{ name: 'Arto Hellas', number: '1' }])
  const [input, setInput] = useState({
    name: '',
    number: '',
  })

  const handleChange = e => {
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    })
  }

  const handleSubmit = e => {
    e.preventDefault()
    if (input.name === persons.name) {
      alert('duplicate')
      setInput({ name: '', number: '' })
      return persons
    } else {
      setPersons([...persons, { name: input.name, number: input.number }])
      setInput({ name: '', number: '' })
    }
  }

  return (
    <>
      <h1>Phonebook</h1>
      <h3>Add a new</h3>
      <PersonForm
        input={input}
        persons={persons}
        handleSubmit={handleSubmit}
        handleChange={handleChange}
      />
    </>
  )
}

export default App