Создание простого контактового списка в React

Условие

Необходимо построить небольшое React‑приложение, позволяющее управлять перечнем контактов. Приложение должно выводить список записей, где каждая запись содержит имя и телефонный номер. Пользователь может добавить новую запись, заполнив два поля ввода и нажав кнопку «Add».

 const ContactsApp = () => {
    return (
    <div>
    <h1>Contact List</h1>
    <div>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Phone" />
    <button>Add</button>
    </div>
    </div>
});

export default ContactsApp;

Ответ

Храните список контактов и два поля формы в state. При submit добавляйте запись с отдельным ID, затем очищайте поля.

const ContactsApp = () => {
  const [contacts, setContacts] = React.useState([]);
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const nextId = React.useRef(0);
  function add(event) {
    event.preventDefault();
    if (!name.trim() || !phone.trim()) return;
    const contact = { id: nextId.current++, name: name.trim(), phone: phone.trim() };
    setContacts(current => [...current, contact]);
    setName(''); setPhone('');
  }
  return <div><h1>Contact List</h1>
    <form onSubmit={add}>
      <label>Name <input required value={name} onChange={e => setName(e.target.value)} /></label>
      <label>Phone <input required type='tel' value={phone} onChange={e => setPhone(e.target.value)} /></label>
      <button>Add</button>
    </form>
    <ul>{contacts.map(contact => <li key={contact.id}>{contact.name}: {contact.phone}</li>)}</ul>
  </div>;
};

Телефон оставлен строкой, чтобы не терять плюс и ведущие нули. Проверка формата и сохранение после перезагрузки — отдельные требования.