How To Use Kanban Board of React Beautiful Dnd In React Js.

In this article, we learn how to use the kanban board in react js.

First, open our react app and install dependency for using the kanban board.

npm i react-beautiful-dnd
npm i uuid

Here also we installed dependency for unique id.

Now add data for showing on the board.

const itemsFromBackend = [
  { id: uuid(), content: "First task", description: "This is my First task" },
  { id: uuid(), content: "Second task", description: "This is my Second task" },
  { id: uuid(), content: "Third task", description: "This is my Third task" },
  { id: uuid(), content: "Fourth task", description: "This is my Fourth task" },
  { id: uuid(), content: "Fifth task", description: "This is my Fifth task" }
]

Now take column data to show the column and its items.

const columnsFromBackend = {
   [uuid()]: {
      name: "Requested",
      items: itemsFromBackend
   },
   [uuid()]: {
      name: "To do",
      items: []
   },
   [uuid()]: {
      name: "In Progress",
      items: []
   },
   [uuid()]: {
      name: "Done",
      items: []
   }
};

Here uuid import from the uuid dependency and also import Draggable, Droppable, and DragDropcontext from react-beautiful-dnd dependency.

import { Draggable, Droppable, DragDropContext } from 'react-beautiful-dnd';
import uuid from "uuid/v4";

Now take the state for column update.

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

Then we create onDragEnd function for onDragEnd event in DragDropContext tag. In that, we set column data based on dragging and dropping tasks with filtering.

const onDragEnd = (result, columns, setColumns) => {
   if (!result.destination) return;
   const { source, destination } = result;

   if (source.droppableId !== destination.droppableId) {
       const sourceColumn = columns[source.droppableId];
       const destColumn = columns[destination.droppableId];
       const sourceItems = [...sourceColumn.items];
       const destItems = [...destColumn.items];
       const [removed] = sourceItems.splice(source.index, 1);
       destItems.splice(destination.index, 0, removed);
       setColumns({
          ...columns,
          [source.droppableId]: {
              ...sourceColumn,
              items: sourceItems
           },
           [destination.droppableId]: {
               ...destColumn,
               items: destItems
            }
        });
   } else {
        const column = columns[source.droppableId];
        const copiedItems = [...column.items];
        const [removed] = copiedItems.splice(source.index, 1);
        copiedItems.splice(destination.index, 0, removed);
        setColumns({
           ...columns,
           [source.droppableId]: {
               ...column,
                items: copiedItems
            }
        });
   }
};

Now show all columns and task we take the DragDropContext tag inside that pass the ondragEnd event for column set and in that map column data and return into the Droppable tag. with the Droppable tag we can show how many columns in the board and inside that we map column items (task), the task will return in Draggable tag.

<div style={{ display: "flex", justifyContent: "center", height: "100%" }}>
  <DragDropContext onDragEnd={result => onDragEnd(result, columns, setColumns)}>
  {Object.entries(columns).map(([columnId, column], index) => {
    return (
      <div className='flexclass' key={columnId}>
        <h2>{column.name}</h2>
        <div style={{ margin: 8 }}>
          <Droppable droppableId={columnId} key={columnId}>
             {(provided, snapshot) => {
               return (
                 <div {...provided.droppableProps} ref={provided.innerRef}
                    style={{
                      background: "rgb(142,180,203)",
                      padding: 4,
                      width: 250,
                      minHeight: 700
                    }}
                  >
                    {column.items.map((item, index) => {
                       return (
                         <Draggable key={item.id} draggableId={item.id} index={index}>
                           {(provided, snapshot) => {
                             return (
                               <div ref={provided.innerRef} {...provided.draggableProps}
                                 {...provided.dragHandleProps}
                                   style={{
                                     userSelect: "none",
                                     padding: 16,
                                     margin: "0 0 8px 0",
                                     minHeight: "50px",
                                     backgroundColor: "#456C86",
                                     color: "white",
                                     ...provided.draggableProps.style
                                   }}
                                 >
                                   <span className='content'>{item.content}</span>
                                   <hr />
                                   <p>{item.description}</p>
                                 </div>
                               );
                             }}
                           </Draggable>
                         );
                       })}
                       {provided.placeholder}
                 </div>
              );
            }}
          </Droppable>
        </div>
      </div>
    );
  })}
  </DragDropContext>
</div>

Output:-