Условие
State нельзя мутировать - не используйте splice/push. Для удаления создайте новый массив через filter. Чтобы кнопка «Удалить» в дочернем компоненте изменила state родителя, передайте функцию через проп onRemove - это «собственное событие» React. В App.js нужны только два класса: App и StaffList.
Что нужно сделать
- В App храните трёх участников (Олег, Вера, Павел) в состоянии.
- Сделайте удаление через новый массив, без мутации старого.
- Вынесите список в дочерний компонент и передайте ему способ сообщить об удалении.
- У каждой строки должна быть кнопка «Удалить».
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. Дочерний компонент не должен сам править state родителя - он только вызывает переданный колбэк. Подробности - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Список с кнопкой «Удалить»
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
- Иммутабельность state - не менять массив на месте (без splice/push); создавать новый.
Array.filter()+this.setState- удаление участника.- Callback-проп
onRemove- функция от App к StaffList. class Appиclass StaffList- два классовых компонента.map()+key- строки списка.onClick,<ul>,<li>, кнопка «Удалить».this.props- roster и onRemove в дочернем компоненте..staff-app,.staff-list,.staff-row- CSS превью.
Пишите код только в
App.js.
Ниже - важные понятия по теме задачи.
Стили превью (CSS)
-
html, body-margin: 0,min-height: 100%,background: #faf5ff. -
body-font-family,padding: 16px,box-sizing: border-box, фон#faf5ff. -
#root,.staff-app-max-width: 420px,min-height: calc(100vh - 32px),margin: 0 auto. -
.staff-app h1- заголовок «Команда проекта». -
.staff-list-list-style: none, flex-колонка с gap. -
.staff-row,.staff-row__info,.staff-row__remove- строка, текст и красная кнопка удаления.
Оболочка превью (HTML, не редактируется)
<!DOCTYPE html>,<html lang="ru">,<meta charset="UTF-8" />,<div id="root">.- Монтирование
Appчерез ReactDOM.
Иммутабельное удаление
roster.filter((m) => m.id !== id) - новый массив без удалённого элемента.
Старый массив не трогаем. Затем передайте результат в
this.setState({ roster: ... }).
Callback onRemove
App передаёт onRemove={this.removeMember} в StaffList.
По клику «Удалить» вызывается onRemove(member.id).
State живёт в родителе - ребёнок только сообщает о действии.
Коротко: App + StaffList → roster в state → filter → onRemove → «Проверить».