Реализуйте список на локальном state: пользователь должен иметь возможность добавлять и удалять элементы; данные не должны сохраняться после перезагрузки страницы.

Храните элементы в useState, добавляйте новую запись с устойчивым ID и удаляйте через filter. Без внешнего хранилища список сбросится после перезагрузки.

Короткий ответ

Что ответить на собеседовании

Храните элементы в useState, добавляйте новую запись с устойчивым ID и удаляйте через filter. Без внешнего хранилища список сбросится после перезагрузки.

Подробный разбор

Ответ с пояснениями

Храните элементы в useState, добавляйте новую запись с устойчивым ID и удаляйте через filter. Без внешнего хранилища список сбросится после перезагрузки.

Минимальный React-вариант:

function List() {
  const [items, setItems] = React.useState([]);
  const [text, setText] = React.useState('');
  const nextId = React.useRef(0);
  function add(event) {
    event.preventDefault();
    const value = text.trim();
    if (!value) return;
    const item = { id: nextId.current++, text: value };
    setItems(current => [...current, item]);
    setText('');
  }
  return <>
    <form onSubmit={add}>
      <label>Элемент <input value={text} onChange={e => setText(e.target.value)} /></label>
      <button>Добавить</button>
    </form>
    <ul>{items.map(item => <li key={item.id}>
      {item.text} <button onClick={() => setItems(current => current.filter(x => x.id !== item.id))}>Удалить</button>
    </li>)}</ul>
  </>;
}

Локальный счётчик подходит этой форме без сохранения и обмена данными между экземплярами.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее