Динамический список полей
Условие
Форма со списком телефонов: кнопка <button class="add"> добавляет пустое поле, у каждого поля своя <button class="del">. Поля - <input class="phone">. Значения не должны путаться при удалении из середины.
Что проверяют тесты
добавляет поля
значения не путаются при удалении из середины
сообщает значения наружу
можно удалить все поля
Как подойти
Динамический список полей - место, где ключ по индексу ломается наглядно: удаляешь второе поле, и значение третьего оказывается во втором, потому что React считает это тем же узлом с изменившимся пропсом. Стабильный идентификатор из счётчика решает это полностью. Тот же приём нужен для списка загрузок, тегов и любых повторяемых блоков формы.
Подсказки: 3
- Ключ обязан быть привязан к полю, а не к его позиции.
- Идентификатор берётся из счётчика в ref: индекс после удаления сдвинется, а Date.now() совпадёт при быстром добавлении.
- Обновление значения - map с заменой только совпавшего элемента.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.