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

内容

カテゴリ追加機能を作る！

1.新しくユーザーが足したカテゴリを合体

今の categories は、データ（list）から自動で作るようにしていました。ここに「新しくユーザーが足したカテゴリ」も合流させる必要があります。

まずは、手動で追加したカテゴリを保存するための配列を用意します。

Home.jsx

  // 追加されたカテゴリ
 const [addedCategories, setAddedCategories] = useState([]);

次に、もともとlistにあったカテゴリと、追加したカテゴリをくっつけます。
合体した後にカテゴリの配列を作成します。

Home.jsx

  // カテゴリを合体
 const allCategories = [
   ...list.map((item) => item.category), // 1. 支出データにあるカテゴリ
   ...addedCategories, // 2. 手動で追加したカテゴリ
 ];

 // 全てを合体させてから、Set で重複を削除し、最後に「全て」を先頭に添える
 const categories = ["全て", ...new Set(allCategories.filter((cat) => cat))];

注意点

こう書いちゃうと、画像みたいにヘッダーのカテゴリが重複しちゃうので注意。

Home.jsx

const categories = [
 "全て", 
 ...new Set(list.map(item => item.category)), 
 ...addedCategories
];

2.入力されたカテゴリをどう保存するか

新しいカテゴリを引数に受け取り、addedCategories（手動で追加したカテゴリを保存するための配列）にくっつける関数を作成。

Home.jsx

  // 新規カテゴリ追加
  const handleAddCategory = (newCat) => {
    // 今までの配列 (...addedCategories) を広げて、新しいのを追加
    setAddedCategories([...addedCategories, newCat]);
  };

そしたらhandleAddCategoryをpropsでPlusModal.jsxに渡す。
そして、PlusModal.jsxの＋ボタンのonClick内でhandleAddCategory関数に、入力されたカテゴリを渡せばOK！

PlusModal.jsx

                {/* カテゴリを新しく作るためのボタン */}
                <IconButton
                  aria-label="Add category"
                  icon={<AddIcon />}
                  variant="outline"
                  onClick={() => {
                    // ① ユーザーにカテゴリ名を入力してもらう
                    const name = prompt("新規カテゴリ追加");

                    // ② もし名前が入力されたら、親にその名前を伝える
                    if (name) {
                      // ここで親（Home.jsx）から受け取った「カテゴリ追加用関数」を実行する
                      handleAddCategory(name);
                      // 「今選択されているカテゴリ」のStateも、この名前に書き換える！
                      setNewItemCategory(name);
                    }
                  }}
                />

setNewItemCategory(name);を書けば、新しく追加した時に自動的に選択された状態にできる！

結果

スーパーを追加すると、、

自動で選択された状態になってるし、ヘッダーのカテゴリ欄にも追加されてる！