WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yQHr4opz_N0.htmlsi=51b2XP_84GH3q6oF
Can this functionality also be applied to a grid? I'm currently working on a dashboard project where I need to implement drag-and-drop and resizing for the metrics displayed in the dashboard. I'm using the Grid component from Material UI.
@@MonsterlessonsAcademy I did try using `react-grid-layout` but it works well with class based components and react official documentation doesn't recommend using class components. Will give it a try and I would love to see a video on using it with the Grid. Thank you.
Hi Oleksandr, thank you very much. I always wanted to know how page builders (Elementor, or in Shopify...) work with drag&drop, especially how do they save the state (so that when we re-open the page, all the components we built are saved). Do they persist the whole resulting html? Or do they persist a model and re-create the html dynamically out of that model? I'm very curious and would be happy to learn from your experience :)
I have no idea as I never used them. But I assume it is either local storage or API. In a big project it is for sure API as local storage it really limited. Which means which every drag/change/add on client side they send a request to API with information how all elements are located and their positions. Then on page reload this information is loaded from API and elements are positioned accordingly.
react-beautiful-dnd, which is mentioned at the start of this video, has become pragmatic-drag-and-drop which is under very active development and isn't specific to react anymore.
Nice Work MonsterlessonsAcademy; you have no idea I wasted the last 3 weeks trying to learn react beautiful dnd and it lacks documentations. I tried to use chatgpt to learn it, no use.... dnd-kit seems promising but it's like 2 years old only.
@iamanupambiswas To achieve that, you can create a column named “sort_index” in the database. In your React app, you can create a hidden input with the same name and set its “value” attribute to “index”. When the onDragEnd function is triggered, you can make a call to the database to update all the elements on the list. To avoid calling the database too frequently, it’s recommended to use a debouncing function. Any questions, let me know.
hey thanks for this, i am in a similar issue. I am trying a linktree clone with supabase tables "users" and "links" as a learning experiment. I am using NextJS with Supabase. Right now im at a stage on how do i persist data to display links for a specific user as each user will have its own sorting arrangement. How do you think i should go about it? All links are in "links" table and i get them from the user that requests it accordingly. any help is appreciated.
hey thanks for this, i am in a similar issue. I am trying a linktree clone with supabase tables "users" and "links" as a learning experiment. I am using NextJS with Supabase. Right now im at a stage on how do i persist data to display links for a specific user as each user will have its own sorting arrangement. How do you think i should go about it? All links are in "links" table and i get them from the user that requests it accordingly. any help is appreciated.
Because nowadays all libs are written with hooks and they are a reusable way to implement things. It's not mandatory but other libs had bad API or were deprecated. For example there is zero sense to use render props approach in React nowadays.
