> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build a drag and drop to-do list
- URL: https://reactpractice.dev/exercise/build-a-drag-and-drop-to-do-list/
- Published: 2024-06-09T16:06:54.000Z
- Updated: 2026-06-01T01:56:56.000Z
- Author: Corina Udrescu
- Tags: Intermediate, #corina-2, Exercises, #Import 2026-06-09 12:07

Build a Kanban-style to do list, where you can drag the cards from one column to the other to mark them as "To do", "In Progress" or "Done".

- app should have three columns: "To do", "In progress", "Done"
- users can drag and drop cards from one column to the other
- users can add tasks by typing into an input above the columns
- users can delete tasks by dragging and dropping over a "trash" area at the bottom of the columns

Focus of this exercise is on structuring the components, sharing the state and the drag and drop functionality. Styling is not relevant - but feel free to "embellish" the app if you want to!

Here is an example of how you would use the `ToDoList` component:

```
<ToDoList
  todos={[
	{ id: 1, text: "buy milk", status: "to-do" },
	{ id: 2, text: "wash bike", status: "in-progress" },
	{ id: 3, text: "do the budget", status: "done" },
	{ id: 4, text: "call jane", status: "to-do" },
  ]}
/>

```

For the drag and drop functionality, you should use [DnD Kit](https://dndkit.com/?ref=reactpractice.dev)

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/how-to-build-a-drag-and-drop-to-do-list/) and the comments section for feedback and discussion.