React drag and drop to sort the list and persist the sorted data

Book one-to-one mock interview session with me : https://topmate.io/bikashxsharma Join discord :   / discord   ⭐ Features - Key ideas you will learn from this video are: ⭐ 🔸 React drag and drop 🔸 React sorting the list and drag drop 🔸 React form stepper ⭐ Tech Stacks ⭐ 🔸 React 🔸TypeScript 🔸CSS 🔸 React beautiful dnd ➤ Github repo: https://github.com/thebikashweb/react... ➤ Connect with me on Linkedin:   / bikashxsharma   ➤ Discussion on Discord   / discord   ➤ Live Demo: https://bw-react-multi-form.netlify.app ➤ Github Repository: https://github.com/thebikashweb Other videos: ➤ React Interview task:    • This was my first react coding interview t...   ➤React multi step form:    • How to make multi step form in react   ➤ Search bar filter:    • Create A Search Bar Filter In JavaScript, ...   ➤ Dynamic form:    • How to create Dynamic form field in React ...   ➤ API call for production:    • API calls for production | Better API call...   ➤ React Country App Portfolio project:    • Let's build a complete web app using Count...   ➤ Easy Redux tutorial :    • Redux easy explanation 😎 React Redux Begin...   ➤ React Router 6 video:    • React Router v6 Tutorial - Dashboard examp...  8 ➤ React Router Protected Route:    • react router v6 tutorial Public Route and ...   ⭐ Timestamps ⭐ 0:00 Introduction 02:25 Package and dependencies react beautiful dnd 02:47 Setting up list content and states 03:54 Understanding sorting basics 08:14 Defining drag area context 09:55 Defining droppable area 12:31 Draggable item 16:17 sort handler function to save sorting index 27:36 Persisting sorted index in localStorage and database 31:21 Bonus: multiple droppable area - dragging to column React drag and drop React drag and drop and persisted data Sorting in react and persiste data #rreact #reactdraganddrop #reactdnd