Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

[madanbajagai3]

DragAndDropBoard.js
`import {
DndContext,
DragOverlay,
PointerSensor,
useSensor,
useSensors,
} from "@dnd-kit/core";
import React, { useMemo, useState } from "react";
import { SortableContext, arrayMove } from "@dnd-kit/sortable";
import ColumnContainer from "./ColumnContainer";
import { createPortal } from "react-dom";
import TaskCard from "./TaskCard";
import "./DragAndDropBoard.css";

const DragAndDropBoard = () => {
function generateId() {
return Math.floor(Math.random() * 10001);
}

const defaultCols = [
{
id: "todo",
title: "Todo",
},
{
id: "doing",
title: "Work in progress",
},
{
id: "done",
title: "Done",
},
];

const defaultTasks = [
{
id: "1",
columnId: "todo",
content: "List admin APIs for dashboard",
},
{
id: "2",
columnId: "todo",
content:
"Develop user registration functionality with OTP delivered on SMS after email confirmation and phone number confirmation",
},
{
id: "3",
columnId: "doing",
content: "Conduct security testing",
},
{
id: "4",
columnId: "doing",
content: "Analyze competitors",
},
{
id: "5",
columnId: "done",
content: "Create UI kit documentation",
},
{
id: "6",
columnId: "done",
content: "Dev meeting",
},
{
id: "7",
columnId: "done",
content: "Deliver dashboard prototype",
},
{
id: "8",
columnId: "todo",
content: "Optimize application performance",
},
{
id: "9",
columnId: "todo",
content: "Implement data validation",
},
{
id: "10",
columnId: "todo",
content: "Design database schema",
},
{
id: "11",
columnId: "todo",
content: "Integrate SSL web certificates into workflow",
},
{
id: "12",
columnId: "doing",
content: "Implement error logging and monitoring",
},
{
id: "13",
columnId: "doing",
content: "Design and implement responsive UI",
},
];

const [columns, setColumns] = useState(defaultCols);

const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);

const [tasks, setTasks] = useState(defaultTasks);

const [activeColumn, setActiveColumn] = useState(null);

const [activeTask, setActiveTask] = useState(null);

function createNewColumn() {
const columnToAdd = {
id: generateId(),
title: Column ${columns.length + 1},
};

setColumns([...columns, columnToAdd]);

}
function updateColumn(id, title) {
const newColumns = columns.map((col) => {
if (col.id !== id) return col;
return { ...col, title };
});

setColumns(newColumns);

}
function deleteColumn(id) {
const filteredColumns = columns.filter((col) => col.id !== id);
setColumns(filteredColumns);

const newTasks = tasks.filter((t) => t.columnId !== id);
setTasks(newTasks);

}
function createTask(columnId) {
const newTask = {
id: generateId(),
columnId,
content: Task ${tasks.length + 1},
};

setTasks([...tasks, newTask]);

}
function deleteTask(id) {
const newTasks = tasks.filter((task) => task.id !== id);
setTasks(newTasks);
}
function updateTask(id, content) {
const newTasks = tasks.map((task) => {
if (task.id !== id) return task;
return { ...task, content };
});

setTasks(newTasks);

}

const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 10,
},
})
);

function onDragStart(event) {
if (event.active.data.current?.type === "Column") {
setActiveColumn(event.active.data.current.column);
return;
}

if (event.active.data.current?.type === "Task") {
  setActiveTask(event.active.data.current.task);
  return;
}

}

function onDragEnd(event) {
setActiveColumn(null);
setActiveTask(null);

const { active, over } = event;
if (!over) return;

const activeId = active.id;
const overId = over.id;

if (activeId === overId) return;

const isActiveAColumn = active.data.current?.type === "Column";
if (!isActiveAColumn) return;

setColumns((columns) => {
  const activeColumnIndex = columns.findIndex((col) => col.id === activeId);

  const overColumnIndex = columns.findIndex((col) => col.id === overId);

  return arrayMove(columns, activeColumnIndex, overColumnIndex);
});

}

function onDragOver(event) {
const { active, over } = event;
if (!over) return;

const activeId = active.id;
const overId = over.id;

if (activeId === overId) return;

const isActiveATask = active.data.current?.type === "Task";
const isOverATask = over.data.current?.type === "Task";

if (!isActiveATask) return;

// Im dropping a Task over another Task
if (isActiveATask && isOverATask) {
  setTasks((tasks) => {
    const activeIndex = tasks.findIndex((t) => t.id === activeId);
    const overIndex = tasks.findIndex((t) => t.id === overId);

    if (tasks[activeIndex].columnId != tasks[overIndex].columnId) {
      // Fix introduced after video recording
      tasks[activeIndex].columnId = tasks[overIndex].columnId;
      return arrayMove(tasks, activeIndex, overIndex - 1);
    }

    return arrayMove(tasks, activeIndex, overIndex);
  });
}

const isOverAColumn = over.data.current?.type === "Column";

// Im dropping a Task over a column
if (isActiveATask && isOverAColumn) {
  setTasks((tasks) => {
    const activeIndex = tasks.findIndex((t) => t.id === activeId);

    tasks[activeIndex].columnId = overId;
    return arrayMove(tasks, activeIndex, activeIndex);
  });
}

}

return (

{columns.map((col) => (
<ColumnContainer
key={col.id}
column={col}
deleteColumn={deleteColumn}
updateColumn={updateColumn}
createTask={createTask}
deleteTask={deleteTask}
updateTask={updateTask}
tasks={tasks.filter((task) => task.columnId === col.id)}
/>
))}

Add Column


{createPortal(

{activeColumn && (
<ColumnContainer
column={activeColumn}
deleteColumn={deleteColumn}
updateColumn={updateColumn}
createTask={createTask}
deleteTask={deleteTask}
updateTask={updateTask}
tasks={tasks.filter(
(task) => task.columnId === activeColumn.id
)}
/>
)}
{activeTask && (

)}
,
document.body
)}

);
};

export default DragAndDropBoard;
`

ColumnContainer.js
`import { SortableContext, useSortable } from "@dnd-kit/sortable";
import React, { useMemo, useState } from "react";
import TaskCard from "./TaskCard";
import "./DragAndDropBoard.css";
import { BsThreeDots } from "react-icons/bs";

import { CSS } from "@dnd-kit/utilities";
import { AiFillPlusCircle } from "react-icons/ai";
import { MdDelete } from "react-icons/md";

const ColumnContainer = ({
column,
deleteColumn,
updateColumn,
createTask,
tasks,
deleteTask,
updateTask,
}) => {
const [editMode, setEditMode] = useState(false);

const tasksIds = useMemo(() => {
return tasks.map((task) => task.id);
}, [tasks]);

const {
setNodeRef,
attributes,
listeners,
transform,
transition,
isDragging,
} = useSortable({
id: column.id,
data: {
type: "Column",
column,
},
disabled: editMode,
});

const style = {
transition,
transform: CSS.Transform.toString(transform),
};

if (isDragging) {
return (

);
}

return (

{/* Column title */}
<div
{...attributes}
{...listeners}
onClick={() => {
setEditMode(true);
}}
className="colTitle"
>

{!editMode && ${column.title} (${tasks.length})}
{editMode && (
<input
className="bg-black focus:border-rose-500 border rounded outline-none px-2"
value={column.title}
onChange={(e) => updateColumn(column.id, e.target.value)}
autoFocus
onBlur={() => {
setEditMode(false);
}}
onKeyDown={(e) => {
if (e.key !== "Enter") return;
setEditMode(false);
}}
/>
)}

  <div className="tasks_container ">
    {tasks?.map((task) => (
      <TaskCard key={task.id} task={task} />
    ))}
  </div>
  <h5 className="text-center font-weight-bold mt-3">Total: $5000</h5>
</div>

);
};

export default ColumnContainer;
`

TaskCard.js
`import { useSortable } from "@dnd-kit/sortable";
import React, { useState } from "react";
import "./DragAndDropBoard.css";
import { AiFillPlusCircle } from "react-icons/ai";
import avatar1 from "../../assets/crm/pipeline/avatar.png";
import avatar2 from "../../assets/crm/pipeline/avatar2.png";

import { CSS } from "@dnd-kit/utilities";
import Modal from "../Modal/Modal";
import DndModal from "./DndModal";

const TaskCard = ({ task, deleteTask, updateTask, title }) => {
const [mouseIsOver, setMouseIsOver] = useState(false);
const [editMode, setEditMode] = useState(false);
const [showModal, setShowModal] = useState(false);

const handleModal = () => {
setShowModal((prev) => !prev);
};

const {
setNodeRef,
attributes,
listeners,
transform,
transition,
isDragging,
} = useSortable({
id: task.id,
data: {
type: "Task",
task,
},
disabled: showModal,
});

const style = {
transition,
transform: CSS.Transform.toString(transform),
};

if (isDragging) {
return

;
}

if (showModal) {
return (
<div
className="textareaDiv"
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
>
<Modal
showModal={showModal}
setShowModal={setShowModal}
size={"modal-xl"}
header={title}
>

);
}

return (
<>
<div
className="taskCard"
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
onDoubleClick={handleModal}
>

Transfer to Sikhar

<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
style={{ height: "25px", width: "25px" }}
fill="white"
>

Soori Solutions

Amount $1000

<p style={{ color: "#2A66FF" }} className="w-100 ">
Banking Sector

---

Aug 16 - Aug 20

</>
);
};

export default TaskCard;



`

[bycolour2]

Try to rewatch video and dig into source code on git hub repo, as i know author missed few things in video and fixed it in github repo