DOM и React Middle Компоненты на практике обновлено
Ключи списка
Условие
Список с чекбоксами. При удалении первого элемента отметки оставшихся не должны съезжать. Используй правильный ключ.
Что проверяют тесты
рисует список
отметка держится за своим элементом
Как подойти
key говорит React, какой узел какому элементу данных соответствует. Индекс как ключ ломается при вставке, удалении и сортировке: неуправляемое состояние (значение input, фокус, анимация) остаётся на позиции и достаётся чужому элементу. Индекс допустим только для статичного списка, который никогда не меняет порядок.
Подсказки: 2
- Ключ по индексу привязывает состояние DOM-узла к позиции, а не к данным.
- Используй стабильный идентификатор элемента.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.