Drag and Drop in React with React Query and react-beautiful-dnd

Learn how to add drag and drop in React with React Query and react-beautiful-dnd. This drag and drop tutorial refactors a React Query todo list app with react-beautiful-dnd and shows how to persist the reordered list items after refreshing the app.

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

Drag and Drop in React with React Query and react-beautiful-dnd

(00:00) Intro
(00:11) Welcome
(00:32) What We're Adding
(01:28) Starter Code
(02:43) Updating & Adding Dependencies
(05:02) json-server
(06:06) Starting the project
(07:31) Initial DnD imports
(08:45) DragDropContext
(09:57) Bracket Pair Colorization
(10:27) Droppable
(11:55) Parent section
(13:02) Assigning content
(13:39) Mapping todos
(14:30) Draggable
(18:03) Droppable placeholder
(18:46) React 18 Strict Mode issue & solution
(23:24) Creating intermediate state
(25:31) onDragEnd destination
(29:16) Persisting DnD order with useEffect & localStorage
(36:05) Update handleOnDragEnd
(37:20) handleDelete
(41:05) Testing CRUD Ops and refresh / reload

📚 Tutorial References:

📚 React 18 & react-beautiful-dnd solution resources:

Was this React Drag and Drop tutorial with React Query helpful? If so, please share. Let me know your thoughts in the comments.

#react #drag #drop

[katiehom]

Thank you for going the extra mile and for showing how to persist information with local storage. This is EXACTLY what I needed to start on a passion project of mine that has been waiting in the wings for a while as I've been gaining more skills. You add so much value to my learning.

[fadlo]

hands down the best video about this topic, good job 👍

[ProMinecraftSprite]

you have the best tutorials on youtube regarding react, thanks for your uploads

[gregory-white]

Wow, this is the most heavily nested piece of react code I have seen. The syntax looks very challenging 😳

[Rafiki]

Excellent tutorial, was breaking my head on how to get react-beautiful-dnd to work with react18 and this tutorial was spot on! Thanks, very helpful.

[stevereid]

Another excellent tutorial! ⭐👍🏾 What would be icing on the cake would be if you expanded on this tutorial by showing us how to drarg and drop between lists. 🙏🏾🙏🏾🙏🏾
The way you explain complex logic makes it so easy to undestand. 😎

[salymakhmedov]

I was literally planning on implementing drag and drop in my project and you made a video for it. Thank you!

[elbezz]

Very useful content, thanks for sharing!

[akintobby]

I definitely need to watch this again ☺️. Thank you so much Sir. You never disappoint 💯

[pqan]

Thanks to this tutorial, I have completed my task, I learnt a lot from you, thanks so much teacher

[willyhorizont]

been finish cloning react project to react native, wow lots of new videos that I haven't watched yet 🚀🚀🚀

[hqasmei]

Hi Dave, I had a question. What if you try to use this on another device? I'm assuming that states you set in local storage on one device won't translate. Would a solution be that you need to store the order in a database?

[bilalahmed-bmok]

another excellent video. Hi dave Grey, will that is possible in a project we used online react editor, it makes widget and then we used it by drag and drop?

[SathiyaKRS]

Thank you for the Video ., just want to have a clarity . Whether we need to give a default string in the draggableID or we need to pass a unique ID to each draggable item .? 17:58

[shubhamsood]

Hi sir
Thank you for another great tutorial.
A small request though - Can you please continue to react tutorials using typescript, and also create one tutorial using thunk or saga with typescript.

[quasi_verum]

Cool content Dave, but you seem need wider monitor or double space tab instead of 4.

[PrashantSingh-ugtv]

Hi Dave, Can you make a video on the Multiple Checkbox filter option in react like you did on pagination and search ? Would love to see your approach on this. Thanks

[clickadelic]

How did you get the Green line wrapping arout the package.json. Thats awesome..

[surajambekar]

Hello sir,
I am creating a website using react and there I show HTML CSS code like code snippet we see on website.
Could you please tell me how can I add this because when I add HTML code then it shows the output but I only want to show a code.

[rsgbqwj]

I found out that if I clone the complete project, use npm install, start up the json and react server, there will be "Uncaught TypeError: Cannot read properties of undefined (reading 'id')" error. Due to the code snippet of "updateTodos(myArray || data)" that the myArray may be "undefined".