Списки, ключи и контролируемые формы в React

Списки строят через array.map. Ключ (key) помогает React сопоставлять элементы между рендерами — не используйте индекс, если список переупорядочивается.

Контролируемые поля

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

Дальше

Несколько экранов: React Router.

JavaScript

import { useState } from 'react';

function TodoApp() {
  const [text, setText] = useState('');
  const [items, setItems] = useState([]);

  function onSubmit(e) {
    e.preventDefault();
    const value = text.trim();
    if (!value) return;
    setItems((prev) => [...prev, { id: crypto.randomUUID(), value }]);
    setText('');
  }

  return (
    <form onSubmit={onSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">Добавить</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </form>
  );
}

Практическое задание

Задание: список с добавлением элемента.

  • Контролируемый input
  • У каждого пункта стабильный key (не индекс)
  • Пустая строка не добавляется
  • Форма не перезагружает страницу