How to make a to-do app with react-beautiful-dnd

Here is a picture representing the Drag and Drop Components.

Now our columns in the state is an object that contains three objects, so we use Object.entries to give us an array of the key value pair to map and create three droppable containers. In Each of the Droppable containers we map the tasks with the Task Card(Draggable) component.

Task Card Creation

Lets create the Task Card component.

Import the following in the Component.

import React from "react"
import { Draggable } from "react-beautiful-dnd"
import styled from "@emotion/styled"

In the TaskCard Functional Component

const TaskCard = ({ item, index }) => {
  return (
    <Draggable key={item.id} draggableId={item.id} index={index}>
      {provided => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <TaskInformation>
            <p>{item.Task}</p>
            <div className="secondary-details">
              <p>
                <span>
                  {new Date(item.Due_Date).toLocaleDateString("en-us", {
                    month: "short",
                    day: "2-digit",
                  })}
                </span>
              </p>
            </div>
          </TaskInformation>
        </div>
      )}
    </Draggable>
  )
}

export default TaskCard

Again lets take this step by step

1. The Draggable component provided by react-beautiful-dnd is required to have 2 mandatory props the draggableId and the index.
2. Like the Droppable, the Draggable also requires its child to be a function and again we have to take the render props pattern here.
3. The first argument is again called provided and just like the Droppable we have similar properties attached here along with something called dragHandleProps.
4. The dragHandleprops are needed to be applied to the part of the component that we want to use to be able to control the entire component.
5. We want the entire card to be controlled so we provide these props to the parent div itself.

The final step here is complete the onDragEnd callback in the Kanban.js file

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,
      },
    })
  }
}

Handing drag-and-drop

The onDragEnd function is called everytime when a drag is ended, this function is required to handle the rearrangement of the task items as we move it around the dragDropContext. The result object contains the source and the destination of the moved item.

The function handles 3 cases

1. When we move a task and try to drop it out of the dragDropContext or not within a droppable the task needs to go back the original position.

2. When we move a task from one droppable container to another (for eg:- when we move a task from to-do to inprogress)

   • Here all we have to do is remove the task from the SourceColumn, and add it to the destination column. (here the source can be the to-do column and destination can be the inprogress column)

3. When we rearrange the task within the same Droppable container.Here we need to remove the task from the original position and added it to the same array at a different index which is the destination.index.

With this we now have a Kanban where we can move our tasks accordingly.

The css for the same and the entire code can be found here.

You can checkout the live demo here in codesandbox.

References and examples

• React Beautiful Dnd
• Examples
• DragAndDropContext
• Draggable
• Droppable
• Videos