タスクカードの削除

s-yoshiii · Apr 22, 2022 · e1bac6b · e1bac6b
1 parent fd52673
commit e1bac6b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/src/components/task/TaskCard.jsx b/src/components/task/TaskCard.jsx
@@ -4,14 +4,18 @@ import TaskAddInput from "./input/TaskAddInput";
 import TaskCardTitle from "./TaskCardTitle";
 import Tasks from "./Tasks";
 
-const TaskCard = () => {
+const TaskCard = ({ taskCardsList, setTaskCardsList, taskCard }) => {
   const [inputText, setInputText] = useState("");
   const [taskList, setTaskList] = useState([]);
   return (
     <div className="taskCard">
       <div className="taskCardHeadArea">
         <TaskCardTitle />
-        <TaskCardDeleteButton />
+        <TaskCardDeleteButton
+          taskCardsList={taskCardsList}
+          setTaskCardsList={setTaskCardsList}
+          taskCard={taskCard}
+        />
       </div>
       <TaskAddInput
         inputText={inputText}

diff --git a/src/components/task/TaskCards.jsx b/src/components/task/TaskCards.jsx
@@ -11,8 +11,13 @@ const TaskCards = () => {
   ]);
   return (
     <div className="taskCardsArea">
-      {taskCardsList.map((taskCardList) => (
-        <TaskCard key={taskCardList.id} />
+      {taskCardsList.map((taskCard) => (
+        <TaskCard
+          key={taskCard.id}
+          taskCardsList={taskCardsList}
+          setTaskCardsList={setTaskCardsList}
+          taskCard={taskCard}
+        />
       ))}
       <AddTaskCardButton
         taskCardsList={taskCardsList}

diff --git a/src/components/task/button/TaskCardDeleteButton.jsx b/src/components/task/button/TaskCardDeleteButton.jsx
@@ -2,10 +2,21 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 
-const TaskCardDeleteButton = () => {
+const TaskCardDeleteButton = ({
+  taskCardsList,
+  setTaskCardsList,
+  taskCard,
+}) => {
+  const taskCardDeleteButton = (id) => {
+    //タスクカードを削除する
+    setTaskCardsList(taskCardsList.filter((e) => e.id !== id));
+  };
   return (
     <div>
-      <button className="taskCardDeleteButton">
+      <button
+        className="taskCardDeleteButton"
+        onClick={() => taskCardDeleteButton(taskCard.id)}
+      >
         <FontAwesomeIcon icon={faXmark} />
       </button>
     </div>