Храните элементы в useState, добавляйте новую запись с устойчивым ID и удаляйте через filter. Без внешнего хранилища список сбросится после перезагрузки.
Реализуйте список на локальном state: пользователь должен иметь возможность добавлять и удалять элементы; данные не должны сохраняться после перезагрузки страницы.
Храните элементы в 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>
</>;
}
Локальный счётчик подходит этой форме без сохранения и обмена данными между экземплярами.