【オリジナルアプリ.2】購入履歴管理アプリRecapを作る3

内容

画像の保存ボタンを動かす！
保存ロジックを作っていきます。

1.Stateで値を管理

商品名、金額、日付もStateで管理できるように書き換えます。

PlusModal.jsx

  const [itemName, setItemName] = useState(""); // 商品名の記憶
  const [itemPrice, setItemPrice] = useState(""); // 金額の記憶
  const [itemDate, setItemDate] = useState(""); // 日付の記憶
  const [newItemCategory, setNewItemCategory] = useState(""); // 今選択されているカテゴリ

PlusModal.jsx

              <FormLabel>商品名</FormLabel>
              <Input
                placeholder="商品名"
                value={itemName} // Stateを表示
                onChange={(e) => setItemName(e.target.value)} // 打ったらStateに保存
              />

2.保存ボタン（handleSave）の作成

dataをstateで管理

履歴全てをStateで管理できるように書き加えます。

Home.jsx

  // 最初のデータ(data)を list として管理する
  const [list, setList] = useState(data);

保存するための関数

①と③だけ一旦書いて、②はのちほど説明します。

PlusModal.jsx

  const handleSave = () => {
    // ① 4つのバラバラなStateを1つの「モノ」にまとめる
    const newPurchase = {
      id: Date.now(),
      name: itemName,
      price: itemPrice,
      category: newItemCategory,
      date: itemDate,
    };

    // ② 親（Home.jsx）にこの新しいデータを渡す
    // 後ほど

    // ③ 入力欄を空っぽに戻す
    setItemName("");
    setItemPrice("");
    setItemDate("");
    setNewItemCategory("");
  };

このロジックを保存ボタンに渡します。

PlusModal.jsx

          <Button
            colorScheme="orange"
            onClick={() => {
              handleSave();
              setIsOpen(false);
            }}
          >
            保存する
          </Button>

「②親（Home.jsx）にこの新しいデータを渡す」を実装

Home.jsx

  // 新規履歴追加
  const addPurchase = (newPurchase) => {
    setList([...list, newPurchase]); // 今のリストを広げて、新しいのを追加した「新しい配列」で上書き
    setIsOpen(false); // 保存が終わったらモーダルを閉じる
  };

PlusModal.jsxで作成した新規のデータを受け取って、それをlistに追加する関数。終わったらモーダルを閉じたいのでStateをfalseにします。

この関数をPlusModal.jsxに渡します。

Home.jsx

      <PlusModal
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        categories={categories}
        addPurchase={addPurchase}
      />

propsを受け取ったら、その関数に新規データであるnewPurchaseを渡してあげればOK！

PlusModal.jsx

  const handleSave = () => {
    // ① 4つのバラバラなStateを1つの「モノ」にまとめる
    const newPurchase = {
      id: Date.now(),
      name: itemName,
      price: itemPrice,
      category: newItemCategory,
      date: itemDate,
    };

    // ② 親（Home.jsx）にこの新しいデータを渡す
    addPurchase(newPurchase);

    // ③ 入力欄を空っぽに戻す
    setItemName("");
    setItemPrice("");
    setItemDate("");
    setNewItemCategory("");
  };

結果

新規支出を追加できた！