Как реализовать добавление рандомного товара в корзину и удаление его из ассортимента по клику?

Что проверяют

Работу с состоянием, в котором одно действие меняет два списка сразу, и аккуратность со случайностью в React. Следом спрашивают, что будет, когда ассортимент закончится, и можно ли вернуть товар обратно.

Как отвечать

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

• состояние: два массива, products и cart, в одном useReducer или одном объекте. Тогда перенос товара это одно атомарное обновление, а не два setState, которые могут разойтись;
• выбор случайного: индекс Math.floor(Math.random() * products.length) считается в обработчике клика, а в редьюсер уходит уже готовый id товара;
• перенос: редьюсер убирает товар из products через filter и добавляет в cart через [...cart, item], не трогая исходные массивы;
• пустой ассортимент: кнопка получает disabled={products.length === 0}, иначе products[0] окажется undefined;
• идентификаторы: у товаров id из данных, а не Math.random() в момент добавления. Если один товар можно положить дважды, в корзине хранится количество;
• производные значения: сумму корзины считают при рендере из cart, а не держат отдельным состоянием;
• цена: число в копейках или центах, форматирование через Intl.NumberFormat только при выводе.

Где спотыкаются

Вызывают Math.random() внутри функции обновления или редьюсера. Они должны быть чистыми: в StrictMode React в режиме разработки вызывает их дважды, и выбранный товар может не совпасть с тем, что показано в интерфейсе.

Мутируют состояние: products.splice(index, 1) и cart.push(item), затем setCart(cart). Ссылка на массив прежняя, React не видит изменений и не перерисовывает.

Решают только половину задачи: добавляют товар в корзину, но забывают убрать его из ассортимента, или хранят цену строкой после toFixed(2) и потом не могут сложить сумму.