Перемещение случайного автомобиля из автосалона в гараж по нажатию кнопки

Условие

Необходимо изменить существующую веб‑страницу так, чтобы при нажатии на кнопку «Купить машину» из списка доступных автомобилей выбиралась произвольная модель и добавлялась в список гаража.

import "./styles.css";
import { List } from "./list";

const listData = [{ label: "Mercedes" }];

const cars = [
  "Audi",
  "Toyota",
  "Lexus",
  "Volkswagen",
  "Porsche",
  "Nissan",
  "Hyundai",
  "KIA",
  "Chevrolet",
  "Ford",
  "Renault",
  "Mazda",
  "Suzuki",
];

export default function App() {
  return (
    <div className="App">
      <span>По кнопке "покупать" случайную машину и помещать ее в гараж</span>
      <div>Автосалон: {cars.join(", ")}</div>
      <button>Купить машину</button>
      <List items={listData} />
    </div>
  );
}

Ответ

Храните автомобили салона и гаража в state. При клике выбирайте индекс среди оставшихся машин, удаляйте выбранную из салона и добавляйте объект {label} в гараж.

const [state, setState] = React.useState({ available: cars, garage: listData });
const buy = () => {
  const random = Math.random();
  setState(previous => {
    if (!previous.available.length) return previous;
    const index = Math.floor(random * previous.available.length);
    const label = previous.available[index];
    return {
      available: previous.available.filter((_, i) => i !== index),
      garage: [...previous.garage, { label }]
    };
  });
};
// В JSX компонента:
// <button onClick={buy} disabled={!state.available.length}>Купить машину</button>
// <List items={state.garage} />

Показывайте салон через state.available.join(', '). React нужно импортировать. Случайное значение создаётся вне updater, чтобы updater оставался чистым при повторном вызове React. Перемещение атомарно для двух списков; исходные cars и listData не мутируются.