仮：材料プルダウンの作成

frontend/src/components/StuffNameDropDown.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { toBuyApi } from '../services/api';
+import { FormControl, InputLabel, Select, MenuItem } from "@mui/material";
+
+const StuffNameDropDown = ({ value, onChange }) => {
+  return (
+    <FormControl fullWidth>
+      <InputLabel>材料を選択</InputLabel>
+      <Select value={value} onChange={onChange}>
+        <MenuItem value="じゃがいも">野菜</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default StuffNameDropDown;

frontend/src/pages/TaskListPage.tsx

@@ -44,7 +44,7 @@ const EMPTY_TASK: Omit<ToBuy, 'tobuy_id'> & {category: string} & {newAddition: b
   amount: 0,
   shop: '',
   category: '',
-  newAddition: false
+  newAddition: false,
 }
 
 const TaskListPage: React.FC = () => {
@@ -52,12 +52,11 @@ const TaskListPage: React.FC = () => {
   const [tobuys, setToBuys] = useState<ToBuy[]>([]);
   // 新規タスク作成ダイアログの表示状態
   const [openDialog, setOpenDialog] = useState(false);
-  // 新規タスクの入力内容
+
-  const [newTask, setNewTask] = useState(EMPTY_TASK);
   //在庫登録ダイアログの表示状態
   const [openInfoDialog, setOpenInfoDialog] = useState(false);
   
-  const [selectedTask, setSelectedTask] = useState<Task>();
+  const [selectedTask, setSelectedTask] = useState<ToBuy>();
 
 
   const [newToBuy, setNewToBuy] = useState(EMPTY_TASK);
@@ -165,6 +164,7 @@ const TaskListPage: React.FC = () => {
                   <IconButton
                     edge="end"
                     aria-label="食材情報追加"
+                    onClick={() => setOpenInfoDialog(true)}
                   //onClick={() => handleDeleteTask(task.id)}
                   >
                     <ShoppingBasketIcon />
@@ -228,7 +228,8 @@ const TaskListPage: React.FC = () => {
           <FormControlLabel
             control={<Checkbox />}
             label="食材を新規追加"
-            checked={newTask.newAddition}
+            checked={newToBuy.newAddition}
+            onChange={(e) => setNewToBuy({ ...newToBuy, newAddition:(e.target as HTMLInputElement).checked })}
           />
         </FormGroup>
         </Box>
@@ -306,7 +307,7 @@ const TaskListPage: React.FC = () => {
           <Button onClick={() => setOpenInfoDialog(false)}>キャンセル</Button>
           <Button onClick={() => {
             if (selectedTask) {
-              handleDeleteTask(selectedTask.id)
+              handleDeleteTask(selectedTask.tobuy_id)
               setOpenInfoDialog(false)
             }
             }}