Build a beautiful, draggable kanban board with react-beautiful-dnd 

Awesome, thanks so much! For anyone having trouble importing uuid, try importing this way: import { v4 as uuid } from 'uuid';

Thanks so much for making this fantastic video! I was struggling to get dnd working and this video has really helped me understand the process. My columns are now fully drag-and-droppable!

I just had the best powernap listening to your voice, it's soothing - thanks!

Thank you so much for this video. It's really helped me to start getting my head round react-beautiful-dnd. :)

Thank you so much for this guide! It's clear, straight to the point and easy to follow. Helped a lot 🙏

Wow! I was looking for this everywhere for the last 7 days and finally, You solved my issues. Thanks a lot, Man.

You guys really publish terrific blog posts and vids. Kudos!

Thank you very much for this video. Saved me a lot of time and stress.

As others have mentioned if you get the "unable to find draggable" error just deactivate strict mode or use hello-pangea instead (uses reac beautiful dndb) that solve the issue for me. Hope it helps

you just saved my life. thank you so much

If anyone is watching this and using Next.js and for some reason the package didn't work. It's entirely because of SSR with Next.js, in order to solve that you'd have to override the "DragDropContext", "Droppable", "Draggable" Example: import dynamic from 'next/dynamic' const DragDropContext = dynamic( async () => { const mod = await import('react-beautiful-dnd') return mod.DragDropContext }, { ssr: false } ) const Droppable = dynamic( async () => { const mod = await import('react-beautiful-dnd') return mod.Droppable }, { ssr: false } ) const Draggable = dynamic( async () => { const mod = await import('react-beautiful-dnd') return mod.Draggable }, { ssr: false } ) Now you use these components instead of importing from the package directly. I suggest you place those above in a separate file maybe in like a directory called "src/components/dragAndDrop/index.tsx" and export them.

If you have the error: "Unable to find draggable with id:" remove "use client" or you can set the reactStrictmode to false. That works for me

thank you so much for making this video.

I watched tow different videos for and in both times I got undruggable object (it don't work for me)

Thank you so much. This is great video for beginners..😊

thank you for that video. Would it be possible to also make a video on combine feature?

Thank you so much, the video was very helpful

when i gave style it start to behave not normal. how to solve this bug

Your react error page looks like django. Is this related to react version?

Thank you for this video

Thanks, this help me a lot 😁

I keep getting the following error: You are attempting to add or remove a Draggable [id: 828473d6-cbc1-4a13-a461-557b0ed59175]while a drag is occurring. This is only supported for virtual lists.

how can we make it save the users board? it keeps reverting back on page refresh or when we restart the app... nodata is saved

why used uuid npm in this project ?

Awesome, thank you so much! Its gonna take me three times more than you to do this but is great haha

Thanks a lot 👍

I have problems, it's showing me Unable to find draggable with id:. :/ , I followed the tutorial and copy and paste the code but the error is still showing me

Thank you sir but how to implement virtualized

Thank you so much :)

thank you!

is this responsive?

Nice, but could you kindly show us a new video showing this saving into firebase? 😅 Locally is so much easier but I'm more about a Trello clone which saves your card drags states to Firebase into their proper collections(or docs)..

Good job

Nice tutorial..How to implement useState after reload?

Didn't work, i copied the code but couldn't drag and drop at the end

Great Tutorial, it helps me to understand and implement the code. but how to implement autoscrolling feature in this project, pls reply ....

draggableId so this one must be string not a number i have a set of data and now i have to convert every id to string

TypeError: prop_types__WEBPACK_IMPORTED_MODULE_4__.object.entries is not a function

Thank you very much!!