Добавь возможность выбора элемента: при нажатии он подсвечивается красным, но из всего списка можно выбрать только один элемент.

Храните один selectedId вместо отдельного флага у каждого элемента; цвет вычисляйте сравнением с этим id.

Короткий ответ

Что ответить на собеседовании

Храните один selectedId вместо отдельного флага у каждого элемента; цвет вычисляйте сравнением с этим id.

Подробный разбор

Ответ с пояснениями

Храните один selectedId вместо отдельного флага у каждого элемента; цвет вычисляйте сравнением с этим id.

Пример React для элементов с уникальными id. Повторное нажатие сохраняет выбор; если нужен сброс, это отдельное правило.

import { useState } from 'react';
function SelectableList({ items }) {
  const [selectedId, setSelectedId] = useState(null);
  return <ul>{items.map(item => <li key={item.id}>
    <button type="button" aria-pressed={selectedId === item.id}
      className={selectedId === item.id ? 'selected' : ''}
      onClick={() => setSelectedId(item.id)}>{item.label}</button>
  </li>)}</ul>;
}
.selected { background: #b91c1c; color: white; }

Если выбранный элемент исчез из данных, можно дополнительно сбросить id по требованиям интерфейса.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее