#17 react-todo-app : add component - list

react/todo-app/src/components/List.js

@@ -0,0 +1,55 @@
+import React from "react";
+
+export default function List({
+  id,
+  title,
+  completed,
+  todoData,
+  setTodoData,
+  provided,
+  snapshot,
+}) {
+  const handleClick = (id) => {
+    let newTodoData = todoData.filter((data) => data.id !== id);
+    setTodoData(newTodoData);
+  };
+
+  const handleCompleteChange = (id) => {
+    let newTodoData = todoData.map((data) => {
+      if (data.id === id) {
+        data.completed = !data.completed;
+      }
+      return data;
+    });
+
+    setTodoData(newTodoData);
+  };
+  return (
+    <div
+      key={id}
+      {...provided.draggableProps}
+      ref={provided.innerRef}
+      {...provided.dragHandleProps}
+      className={`${
+        snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"
+      } flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600  border rounded`}
+    >
+      <div className="items-center">
+        <input
+          type={"checkbox"}
+          defaultChecked={false}
+          onChange={() => handleCompleteChange(id)}
+        />{" "}
+        <span className={completed ? "line-through" : undefined}>{title}</span>
+      </div>
+      <div className="items-center">
+        <button
+          className="px-4 py-2 float-right"
+          onClick={() => handleClick(id)}
+        >
+          x
+        </button>
+      </div>
+    </div>
+  );
+}

react/todo-app/src/components/Lists.js

@@ -1,23 +1,8 @@
 import React from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import List from "./List";
 
 export default function Lists({ todoData, setTodoData }) {
-  const handleClick = (id) => {
-    let newTodoData = todoData.filter((data) => data.id !== id);
-    setTodoData(newTodoData);
-  };
-
-  const handleCompleteChange = (id) => {
-    let newTodoData = todoData.map((data) => {
-      if (data.id === id) {
-        data.completed = !data.completed;
-      }
-      return data;
-    });
-
-    setTodoData(newTodoData);
-  };
-
   const handleEnd = (result) => {
     if (!result.destination) return;
 
@@ -43,38 +28,16 @@ export default function Lists({ todoData, setTodoData }) {
                   index={index}
                 >
                   {(provided, snapshot) => (
-                    <div
+                    <List
                       key={data.id}
-                      {...provided.draggableProps}
-                      ref={provided.innerRef}
-                      {...provided.dragHandleProps}
-                      className={`${
-                        snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"
-                      } flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600  border rounded`}
-                    >
-                      <div className="items-center">
-                        <input
-                          type={"checkbox"}
-                          defaultChecked={false}
-                          onChange={() => handleCompleteChange(data.id)}
-                        />{" "}
-                        <span
-                          className={
-                            data.completed ? "line-through" : undefined
-                          }
-                        >
-                          {data.title}
-                        </span>
-                      </div>
-                      <div className="items-center">
-                        <button
-                          className="px-4 py-2 float-right"
-                          onClick={() => handleClick(data.id)}
-                        >
-                          x
-                        </button>
-                      </div>
-                    </div>
+                      id={data.id}
+                      title={data.title}
+                      completed={data.completed}
+                      todoData={todoData}
+                      setTodoData={setTodoData}
+                      provided={provided}
+                      snapshot={snapshot}
+                    />
                   )}
                 </Draggable>
               ))}