Списки React: key и согласование

СРЕДНИЙ

Задача #34 · Списки и key

Условие

Динамические списки - основа клиентских приложений: массив данных → map() → JSX. Когда элементы добавляются или удаляются, React сравнивает старое и новое дерево (алгоритм согласования). Чтобы не перерисовывать лишнее, каждому элементу списка нужен стабильный key. В App.js создайте компонент ParticipantRow, храните список в useState и выведите три участника через map() с key={person.id}. Сверяйтесь с вкладкой «Результат».

Что нужно сделать

Сделайте строку участника: имя, рейтинг, отметку наставника и кнопку «Исключить».
В App храните трёх участников - София, Дмитрий, Алина - в состоянии.
Выведите список из состояния; у каждой строки должен быть стабильный ключ.
По кнопке удаляйте участника из списка без «ломания» данных.

Подсказка для новичка

Пишите код под комментарием // >>> Пишите код здесь <<<. Список живёт в состоянии; при удалении создавайте новый массив, а не правьте старый на месте. Ключи и API - в «Дополнительной информации».

Стартовый код

Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.

Вот так должно получиться

Три участника в реестре

Реестр участников

София (рейтинг: 87) 🏅

Дмитрий (рейтинг: 72)

Алина (рейтинг: 91) 🏅

Как пользоваться IDE

Предпросмотр — как выглядит ваша страница.
Результат — какой итог должен получиться.
Описание задачи — полное условие и справка.
Задание — краткие шаги 1–2–3 снизу.
Помощник — подсказки по шагам.
Черновик — ссылка на ваш код.
Сброс кода — стартовый шаблон.

Свойства этой задачи

const { useState } = React - хук состояния из React.
useState / setRoster - список участников и его обновление.
Array.map() + key - отрисовка строк.
Array.filter() - новый массив без удалённого участника.
ParticipantRow - дочерний компонент строки (пропсы name, rating, isMentor, onRemove).
onClick, type="button" - кнопка «Исключить».
isMentor && ... - условный вывод метки наставника.
html/body, .participant-list, .participant-row - CSS превью.

Пишите код только в App.js. Ниже - важные понятия по теме задачи.

Стили превью (CSS)

html, body - margin: 0, min-height: 100%, background: #ecfdf5.
body - font-family: system-ui, sans-serif, padding: 16px, box-sizing: border-box.
#root - max-width: 360px, min-height: calc(100vh - 32px).
.app h1 - отступы, font-size: 20px, color: #065f46.
.participant-list - display: flex, flex-direction: column, gap: 8px.
.participant-row - flex-строка, padding, border, border-radius, белый фон; у кнопки - красный фон и белый текст.

Оболочка превью (HTML, не редактируется)

<!DOCTYPE html>, <html lang="ru">, <meta charset="UTF-8" />, <div id="root">.
Монтирование: ReactDOM.createRoot → render(<App />).

map() и key

roster.map((person) => ...) превращает каждый объект в JSX. Атрибут key={person.id} помогает React отличать строки при удалении.

useState и удаление

Список храните в roster. handleRemove вызывает setRoster(prev => prev.filter(...)). Не мутируйте массив на месте - создавайте новый.

Коротко: ParticipantRow → useState(roster) → map + key → handleRemove + filter → «Проверить».

Задание Переместить налево

Сделайте строки участников, список в состоянии и удаление по кнопке в App.js. Сверяйтесь с вкладкой «Результат».

Задачи:

Сделайте строку участника с нужной вёрсткой.
Храните трёх участников в состоянии компонента.
Выведите список со стабильными ключами.
Реализуйте удаление участника из списка.
Нажмите Проверить.

Пишите только в App.js. React подключён в предпросмотре автоматически.

Если условие кажется непонятным - откройте вкладку «Описание задачи».

Автосохранение