カートに追加

React コンポーネントで商品リストとカートを一緒に扱う問題です。'Add' を押すとカートに 項目が追加され、同じ商品をもう一度追加すると数量が1増え、合計も一緒に更新される動作を 完成させます。サーバーやグローバル状態なしで、単一コンポーネント内の画面状態を扱います。

カートは、ユーザーの操作に応じて項目・数量・合計がそろって整合していなければならない 画面です。複数の値が互いに連動しているため、ある値を変えたとき関連する値が一貫して ついて動くように扱うことが核心です。React では画面に見える値を状態として持ち、操作の たびに状態を更新して再描画します。一度の操作だけでなく、同じ商品を何度も追加するような 繰り返し操作のあとも数量と合計が合うかを検証する習慣が重要です。

カートのような画面状態は React でどう扱いますか？

画面に見せる値(追加した項目・数量・合計)をコンポーネントの状態として持ち、ユーザーの操作のたびにその状態を更新します。状態が変わると React が画面を再描画します。

カートの動作はどう検証しますか？

一度の追加だけを見ず、同じ商品を何度も追加して数量がまとまるか、そのとき合計も合っているかを、繰り返し操作のシナリオで確認します。

この問題でサーバーやグローバル状態は必要ですか？

必要ありません。単一コンポーネント内で商品3個を静的な配列として持ち、画面状態だけを扱います。サーバー保存や在庫チェックは範囲外です。