Drag And Drop With React Hooks From Scratch

let's take a look how we can create this drag-and-drop functionality in react hooks I just cleaned up some of that crate react a boilerplate that comes with a new project and now that we have a clean slate to work with I want to create a structure first so just create container with all the groups and then all the groups with items inside of those groups and then you know those items that we can shuffle around drag them around so let's do that first so I'm just gonna create several divs first one I'll just call let's say drag and drop inside of this guy we'll just make another div and call it D nd group and inside of a group we'll add another div call it damn D item so the item is gonna be responsible for all the content inside of it that will be dragging around okay and then inside of item is gonna be whatever we choose to be in there so for instance maybe a custom component or something inside I'll just for that purpose I'll just create another div that has maybe Oh let's see another favorite paragraph inside and we'll just say item inside of it so that we have some extra stuff there to look at now I'm gonna go ahead and remove some of the CS that CSS that came with create react app so we want this to be kind of top left so we I don't think we need all the alignments as well as the direction column so let's just comment this out really quick okay so our item is now top left now let's take a look at the container so we're looking at this drag and drop don't source copy that really quick and I want to use the CSS grid I'm not necessarily really familiar with it so I'd like to practice and just use use that and I think in this case we'll give us some flexibility even though there's some edge cases that we need to think about so let's say it's uh it's gonna be a CSS grid we'll give it 100% whatever it's inside as well as height then we'll say so we want to create columns for whatever the opening that we have so currently we have this screen so I want to divide this screen and columns so to create these automatic columns depending on what what is the size of your viewport it's called grid template columns and we can just say repeat and inside of a repeat we can pass autofill and then the size of our columns so I'll say maybe let's say 300 pixels and now I think Billy I believe the text is centered so what we can do is just open up this guy let me just close the console here so we have a little bit more space here to look at things so if I open up our this is our oh no never mind this is a hurry here you go so in this case we only have two columns you can kind of see where the blue indicates the two different columns so in this view part we were only able to create two columns for that 300 pixel width so let's say if we would change this to like maybe a hundred and go look at the drop you can see that if we had 100 pixel width columns we'll be able to have six of them here but we'll go back to 300 that's what we want to do so we have two columns and then I think this guy item the text in the item is aligned text-align:center yes so text align Center because I believe everything inside of a div app is centered so we'll have to play around and you know remove that override some of those styles so our grid is more or less done the only thing I guess we should still well we can revisit that once we hit it so now let's see groups so a group is basically that column so let's say the end I think we called it the empty group and we'll say that background color for it is going to be a little bit lighter than this dark background for the app header so we'll just pick it and then vs code gives you ability to pick something from the color of color picker so we'll pick something lighter in the same shade and then what we can save it really quick so we can see so here you go we have that but it's always it's really tucked in into that left top so I would say maybe our dragon drop the container should have a padding and let's say give it half a rim as a padding hey go so it kind of a little bit away from from all the edges so next thing I like to round off the corners I think it looks a little bit neater so we'll just give it a border radius five pixels that's usually my choice so we can't see what you have a little bit of radius there so far so good now let's say an item we want the item to be white in this specific case you know obviously you would pick whatever you want so a DND item I think that's what I call pretty sure so we'll say background color white color so we'll do the the color will do the same dark one here we couldn't use black but I think that's that's fine so now if we save it we see that the item now items also all the way to the edges so I want to change that a little bit so let's say the group it's gonna have a padding of also maybe half a room okay so now this guy is a little bit away from it we can say also say that well I want this item to be at least some kind of height so let's give it a minimum height of let's say 150 pixels and let's do some borders border radius I mean I can give it another five pixels to kind of round it off we're almost there that text is kind of weird not believe it for inspected we'll see that there's padding from the P P text and I'd like to get rid of it so I'll just blank it and hit everything inside of that item I'll just say item and I'll hit a star and I'll say anything inside of item element will have no margins and this might not be exactly what we want but currently that's fine so now it fixed it up also will say everything well well for now we can say that text align let's just do text align start so that text is do we know maybe people want to Center it completely so in that case I don't know let's keep it centered at least to the top if we would want this guy like centered absolutely in the container maybe we could use just Lex box so it's a flex I'm justify content center and then a line item center as well but I believe it's not gonna work because the item what we're sitting is it's not exactly the content of that guy so dandy item this guy so this guy flex D item oh-oh I'm doing completely wrong place so let this and add this to the item let's see there you go so it's absolutely positioned there maybe we want to make that bold that's fine I think that's okay we'll just leave it like this maybe font-weight:bold that's not the ideal place to add the styling because every single text is gonna be bald there so we would we would need to be more specific about which element but for now I think for this for this demo I think that's fine we can keep keep just these general styles on it okay so that's that's fine so now let's take a look how this would look with more items in it so that we're not only basing how it looks on the single item so let's say I'm a copy paste this I'll say this item one item two now we see that they're touching together so we don't we want the same little gap here what I think we call the half of RAM between them so in that case we'll have to use couple selectors and DND item and I'll say not and I'll say last of types Oh last time so I'm Jason basically saying that as long as it's not the last item in the sequence of them of those DND items I'm gonna give it a margin bottom 0.5 Ram and we'll have this gap right here at point five because this first item is not the last one so it gets it the second one is the last one and it doesn't get that styling so we're looking good with just couple items in the same group now what if we make a second group so they just had another group with two more so you can kind of see that there's kind of a similar problem here is that we have this no gap here between the two groups it's kind of the similar thing as we did here with a knot selector but since these groups are items within CSS grid we can use gap to give this little gutter per se so we can just go back to our template columns drag and drop yeah so we can say gap and used to be called a thin grid gap but it's now giving me a little here you go you see it's it's crossed out I think there deprecating that's like that property so I think it's now it's gonna be called gap 0.5 Ram and now we have this little gap here between the two groups now another thing that I can kind of see happening if we have let's see if we can grab another group and just copy-paste it once again but make it empty so that we don't have any items and the reason I'm looking at that is because if if this guy's empty I believe it's gonna be so so I had to expand my window a little bit because the this one was wrapping and going into the next next row to fill it up and that's something we might need to handle as well if we get into it but since I'm shrinking all this space for you guys to see the examples as well as the code it's kind of tricky to balance but anyways it's also dynamic text we might want to set it an actual font size rather than dynamic text that's coming from react boilerplate styles anyways so you can see that this new group is expanding to the same size as these guys so I think if I would add a third item in the first one the second group and third group would also adjust the heights so let's let's just quickly do that and I don't think that that's the look that I want so let's say if I do three here yeah exactly so this this space is now kind of filled in because these these guys stretch to whatever the biggest column is they just fill in that space and to do that to avoid that we can go to a drag and drop items and just align them oops so here we can say aligned items and just say something like start and that should that should take care of it yeah so let me resize this and I think we're in a pretty good shape obviously unfortunately the third group is going down so I'm just gonna get rid of it for this example maybe maybe you still want to add group names here at the top so in each group I'm just gonna add a div give it like group title and say Group one and I'll just do the same thing for the other group let's see how it looks yeah well we can target and see for group title let's do text-align:left maybe start left I'm not really sure what starting loved anyways let's do left okay the only other thing is is probably give it margin bottom half a rim so that the gaps are kind of similar across the board yeah and I think that's good enough right I think we're we're okay I wonder if this yeah they're also kind of dynamic so if we're shrinking this let's let's do this so for our items we said no margin and let's give it fine sighs maybe one room and then the group title I'll give it font size 1.5 maybe okay so now these yep so now we got rid of that dynamic part okay so I think we're good with that so now obviously we're not gonna just drop and copy paste all this stuff let's create our pretend data set so let's say we're gonna structure this in the way so if we think about it we're gonna have a list of groups and then inside of each group we're gonna have a list of items so we'll just create an array and each way we'll have an object we'll give it object we'll have let's say group name or we can just say name or title I think we call that group title so let's call it title and we'll give this group one as a title and then we'll say items inside of it that's another array and we'll make this array very simple mind you this array could be another array of objects but in this case I'll just make it one two maybe three then we'll just copy this whole object make this guy a group - and let's do four and five so just make this guy only have two items and I think that would do so 4 will create a new component for this but for now we can just take a look how can we iterate through this so we can say data dot map and we'll say we're gonna take a group as well as the index so we'll call it group index group I and we're going to uh well we can return it right so we can just say come on why is all this okay so we're gonna for each group we're just gonna take the take the group all right so let's say div dandy group so we have that mind you before we do that we need to wrap it with the DND drag and drop so boom let's close it here okay so this guy is now closed we can also get rid of this stuff just comment it out for now just in case I need to refer to it and add so we now a group and then inside of that we're gonna iterate through our group items so we we have this group guy we can say group that items dot map do the same thing except but here we're gonna call it item and then item I for the item index and well we're once again returning so we can say div and we called the DND item and inside of here we'll just pass item yeahjust item since our item is a string right here so we can directly pass an eye here we need to also pass a key I'll just pass the item here and for iterating our groups we'll just pass another key or group that title why are you Auto completing nonsense let's see did we make any boo-boos no it looks like we got it all done and just for fun right now so this key if we give it a draggable draggable true so we can either say draggable true or just draggable which just means the same thing we can see now that if we drag something it leaves kind of like a ghost image so we'll work with that so I just wanted to go through it show the show the very beginnings of it and we'll well switch gears and go into making components and and the rest of the logic that we have planned I got this graph too just gonna go through the sequence of events that we'll need to do for us to achieve this drag-and-drop functionality so initial state this is the state where cards just sitting there being pretty doing nothing so drag start is when we grab a card and start dragging it so this is the part that we initialize a lot of logic so at this point we say we take note which card we're starting to drag so that we can compare with the target area and say if they're not the same we should swap them so that they switch switch places and rearrange then we're gonna initialize drag in listener and we're gonna initialize just drag in listener through just regular Dom API so we'll just say you know event dot target out of an listener and the reason for that is because if we're attached at the react way or you know that since synthetic events I believe called yeah the it's somewhat unpredictable when it's when it fires so if nothing rear Enders within the parent node structure it's okay but if we switch groups then we'll fire dragon whenever that happens and that's not what we expect or want so we'll just do a regular dummy rather than through through using react way and then at the same time we'll need to initialize some kind of styles for the card that we're dragging so it looks a little bit different than the rest of the cards and initialize drag enter listeners so drag enter listeners are the listeners whenever we drag over our card over the different target card or in some cases could be a different target group because sometimes a group could be completely empty and we still want to drop a card and if there's no other cards there we need to attach it to the group itself rather than the card so we can handle that edge case and then once once we get into drag enter this is the point where we actually drag our card over a different card and then we'll say well these two are different cards that therefore we should rearrange our data so that you know that current dragged card is now swapping places with a target target thing and we're just gonna rearrange State and do a couple couple things to make sure that we're keeping track of currents current card and target card and then once we've released a mouse button that's when we expect this dragon to fire and at this point we can get rid of the dragon listeners as well as drag enter listeners since they're not very abused at this point as well let's clean up the styles that we had for for dragged card all right so let's let's move some stuff around I currently just am sitting in objects I'd just want to go ahead and move all this stuff from our app file into a different file and before I forget I see I missed our title so let me quickly put that in here it's a group group that title right let me just make sure it works okay so let me do copy this I'm gonna open up create a new folder call it components add another file called a drag and drop that J yes our react from react quickly just throw something together up for now function drag and drop and for now just kind of return an empty string Explorer default import this guy Bonin's oh how do I love autocomplete and we copied this guys so technically we could get rid of all this stuff so it doesn't clutter it drag and drop make sure we save it nothing breaks not inside of this guy let's drop inside our earth value so data well we can pass data as a data prop data down here it lets destructure the data from it and we're back to where we were now mind you this data we want it kind of my new so we're going to manipulate and we want to see those changes so currently is just hard coded in his constant so did these changes will never take place so what we're going to do is just initialize state with with this data prop so we'll grab our you state and right here we're gonna say well we're gonna call this a list and set list set state and we'll just pass this data here so we'll just initialize it with the data you state sorry not set state going back been between class components and functional components with hooks gets kind of confusing here and there okay so now we're no longer referring to this date data but list let's make sure this all works okay so we're good so we initialize this guy let me just close this close this panel so we have more space okay so we have our list in a state that we can update and see changes so now we currently have this draggable guy so let's create another method or function to handle the drag start I'll call it drag handle drag start and here we'll say on drag start will give it a handle drag start right here we'll just console.log drags this train drag starting so now save it if we start dragging something we see that we fire that function as we're trying to do it now we said we want to get a an item that we're working with the item that we're currently dragging so we can do is simply make this into a function that's gonna fire this function pass event as well as we're gonna pass the group index and item index so while we're iterating through groups we also have this group index as well as where while we're iterating through items we have item index and if we look back quickly in our data structure we see that we have an array of objects which is our group and then inside of our group we have items which is an array of in this case just simple strengths but could be anything so to get the specific item let's say we started drag this number one so we want to get kind of like coordinates to this guy so to the way we get this is by getting well which group is it in by index right so we say well it's 0th index that means it's Group 1 and then 0th item index which is this one so basically what we're trying what we're getting here is passing the coordinates per se to that specific item and here we can say let's console oh so let's we just drop this let's call it parameter and so now if we start dragging we start seeing these these params that we talked about so in this case I'm grabbing in first group the last item which is your oath group and then the second item index so 0 1 2 right okay so that's what what while we're at it we want to set these items and some kind of like a variable that we can keep around so in that case we'll need to use used ref and use ref is something that does stays constant between re-renders so that's that's kind of the reason for using it use draft and we'll just call it drag item drag item and we'll just use ref we won't pass anything there so it kind of just initiated and just to set something to the used ref initiated variable we'll just drag item dot current and we'll just set it to whatever you want in this case we'll just set it to params okay so now every time we drag we set this drag item to those params so now we have basically directions to this specific item every time we drag it around so next thing is well let's style this specific card that we're drag let's style this card being something different than just the same white right so well to do that we need to kind of make some changes into the into the to one of our states so that we see some kind of read re-render so that we can initiate that style change right so what I'll do is just create another state right so in this I'll just call it dragging so it's kind of like true/false is it dragging yes no set dragging and you stayed and by default I'll make it false so by default we're not dragging and here we'll say after we set this this current item dragging item we can say that set dragging to true we're basically saying hey we're actually dragging right now and while we're there okay so let me just take a clean up some of this stuff so that we can see it better get some some some different lines okay so here what we want to do here currently we just have a static class name DND item so what I can do is basically say do a little ternary expression and say well check your dragging is true right so dragging is true we can for instance run a function that returns different string and that string will will have the different styles right so let's say get styles we'll call that function otherwise we're just gonna return back the same regular DND item now let's make this new get Styles function and get styles let's say we could well we can return return spell a let's say return current which is going to be the indicator for the car to be styled differently than dandy - item + DN d item because if we are dragging we're just getting whatever's inside of here which in that case is simply this right so it's not gonna be duplicate here dandy item by itself is only available when we're not dragging okay so in that case we're just gonna pass current right so let's save it nothing is happening because we have nothing style for current right so now let's open up our little panel app CSS let's add something for current and all I want to do is just give it background color the same as the actual background here in the behind so we'll just give it this darker color and you'll see that this stuff is kind of all dark so oops drag and drop so when I start dragging everything becomes that style right which makes sense because we're we're saying that hey is it dragging if it's dragging just do this get styles and if we look at get styles it just simply returns styles for every single item that it's been and iterate iterate right so what we could do is just simply say here we could just pass the group one I'm sorry group I and item I so now we'll say inside of here we'll say well if we're group I equals our drag item group I and drag item item I is equals this item ID that we passed we know that that's the specific item we started dragging and therefore we can only style this one so here what we can say is if we'll make it kind of long and we can kind of short it later but well we can say this let's say Const item what's it current item equals drag item that's current alright so now we're getting these params that we set it right here so we're grabbing that guy and then we'll say also we can get params here so we'll just grab these params that we're passing here and here we can say if current item that group I equals what we set paramananda params dot group I and it's also current current item item I equals put Rams dot item I so this is basically saying only style returns something only for this condition which is both both indices are equals to whatever we're dragging right okay so in that case we'll say well we're gonna return this string right here right otherwise we're just gonna return the same thing just DND item now let's see how that's gonna look so let's refresh it okay now we release it but once we start dragging other stuff nothing is happening and the reason is for it is because we set this to true and this is the only time that we're kind of making changes to the to the state that makes rewrite have rear Enders happen we never told this back to false to cause another rerender to reset this and therefore whenever we're going back and setting it to true it's already true so we didn't change anything so we never rerender this and never asked for this change right so in that case what we need to handle is during drag and we need to do some cleanup right so like once we finish once we release the mouse we don't really need this to be true as well as we don't really need this to be anything either because we just want it to be set to something like null so as we as I mentioned before what we'll have to do here is attach drag and to the note itself rather than use some kind of setup here inside of our return function where we could say for instance you know here would say well on drag on drag and and we give it a method we can't really do that here because it misbehaves occasionally and that's really not what we're trying to do well it's an unpredicted behavior and we'll break things so here what we'll do is first thing is will create another ref and this ref will basically store the reference to this specific node so we'll say drag node right just call it like this and use ref and here we'll just say drag node dot current equals e dot target either target is basically the node that we're we're playing with and once we're done we just set this reference we can just say drag no dot current we can say add event listener will say drag end and we'll pass a method and this method could let's say we're gonna call handle drag end all right so we'll just quickly create this method Const handle drag end and here we'll say console dot log and dang drag alright let's see if we can so I'm dragging it and then releasing it and nothing happens right so why why is nothing happening currently oh because I misspelled drag and drag in alright so let's try this again release it ending drag right ending drag so with that in place we can actually do something about cleanup so not only do we say grab these guys and say this is now null we don't need this we don't need this guy either then we say well we don't really care for that to be true we want it back to default state the initial state and at this point we can also remove this listener that's listening to dragged in right so here instead of ad will say remove so now we have a way to clean things up now release it Oh get a little oh so this guy let's let's move this stuff a little bit down because we're trying to remove a listener after we clear that so it would make sense right release it now see that whatever we're dragging is the color we want and once we're releasing we reset the state now if you can see that we're styling our card right away and once we start dragging we get this dark basically that current black well very dark styling for that card instead of this white so what we want to do is give us set timeout before and I'm sorry with the zero basically making this more like asynchronous so that once we start dragging we get this style and then we set this dragging to true and kind of asynchronous manner that changes this the styling of it right away so here let's try this again here so you see I still have this guy as previous styling but the background has now changed to what we wanted so yeah so that's how we're gonna solve that thing right okay so styling is more or less done our cleanup is more or less done now the only thing left is swapping places whenever we scroll over other cards right so currently we're not handling anything there yet so next step would be to add another function and let's say call it handle drag enter and this is the method or function that will fire whenever we grab this guy and scroll over other cards well we'll start with other cards for now and then we'll adjust for groups in case the group is completely empty so here we can say well if we start dragging right we need all our items to list to add this event listener to themselves right so what we can do is go in into our this card that we're dragging and say on drag enter and here we'll do another ternary expression well we'll say well is dragging currently happening is dragging true if it is true we can pass this method and we'll just make it something so that entering will say entering drag just so that we can see this happening and we'll say well then just pass this guy otherwise we're not gonna pass anything right so now if we save this and start dragging you'll see that right away it fires enter and drag because we just added it and I believe that's how how events will will fire right away and now if I let's scroll over another item will see that enter drag fired again and again and again as um as I'm entering all these items that accepts that well all listens to that event right once I release it goes back but like this right okay another thing is currently we don't know which item we hovered over it just says we know we hovered over so we can replace this once again with a function that passes and a event as well as our group I I and item hi and we can just say that these guys are our wait II and let's say params stay right stay consistent so and here we'll save the rhymes so now we also get coordinates for the item we're scrolling over so I think you guys are probably getting it where we're going with this so now we're we have an item that we are dragging plus the item that we're dragging over at the target target item so here what we can do is first of all since this fires right away once let me clear it like the second I started dragging the entering dragged fires that means we get this drag starting with the same coordinates as entering drag going off so first thing is to check if if they are the same bother doing anything and to check for that same we could use these coordinates in the way but I think we have a little bit simpler way to use is to to check is we have this reference to this node so we can say if this node is not equals e dot target that we're firing here then we're good to go and that let's try it doing that so we could say if a dot target is not equals drag no dot current then we'll say that will just console.log something here really quick saying target is not the same so that we can just see so I start dragging you see that that console never fires so I can go back in it fires but that code block is not now let's see if we go other other items see now other items are saying that hey this this is not the same as this therefore we can do something special here okay so in that case here what we can do is basically set lists right so we have everything all the data that we need to make the changes and I can grab Const dragged item so I'll just say current item I think I used current item for previous one and I'll just use drag item that that current so now we have this guy and here what we can say is well set list and we'll use with a kind of a call but it's not really a call back is just so that we can make the change in the whole set state set list method so here what we'll say is old list it's kind of similar to sets state but it's not really because it's kind of anyways I'll just continue with it so first thing I want to make a copy of this old list so this old list is basically list right there so to make a copy I'll do like a little cheat and I'll say well let me have new list that I'm gonna manipulate and to get this new list the the simplest way mind you not the most efficient but simplest way for me to get a complete deep deep copy right is to say json dot parse and then called json dot stringify and past this old list so here I'll be able to grab a deep copy of this of this object of old list if I did just destructuring using you know something like this where I'd say new list I would only make a shallow copy and I would prefer to use deep deep deep lean clone copy right so now we can manipulate this this new list and to set this list mind you at the end we need to return new list so that's at the end right so let's manipulate this little new list so we'll say let's let's target the item that we're targeting right so not the currently dragged one but the one that we just rolled over right it's scrolled over so we're gonna target that array so we'll say new list we'll grab params group I so now we'll get to the target group index and we'll say items dot splice and what we're doing is basically shuffling around items using splice and we'll say well first thing in a splice if we want to move something right we need to say index of one item so like some index of item that we're trying to replace then say if we're deleting anything at that so we say zero and then the index of the item that we're gonna replace with so let's say two so what we'll do in this case we would take the first and flip it with the second without without removing anything in between I know it's a little strange but this is the quickest way for us to accomplish what we're trying to do so here we can say well if if we take our params dot item I at zero and now this this might get a little bit come convoluted but we have to make sure that we're with the same group right so we need to in between groups should work within the group should work so that's why we're using all these relative paths let's say and maybe absolute paths so we'll say here we'll say new list and we'll go to now current item group i dot items and we're going to splice this guy but in this case we're gonna remove this from that place right and return it so items not splice and we'll say let's remove at index and we'll remove single item so we'll say whatever the X index is and remove one item so that X is basically our currently dragged item so we can just say current item dot item hi now that will just remove an item but this method splice will also return a list if you set it to return it's thing as an array an item of race if we take the zeroth items since we're removing one one item from from this list we'll be able to get this so now if we point at 0th we should be able to make the changes here so now since this technically should work and we'll have to revisit because this is kind of something that I needed to think quite a bit to make it kind of one-liner and here we can say well now since these guys are flipped their places the current item is no longer the current item now the current item became the target item so here I would say what is it drag item that current is going to be equals params right well let's try and see how this works so we grab this scroll over something and it works within the group now if we go another group that works as well now in this case what I just did I just grabbed everything and moved to one group if I try to go back here there are zero cards here for me to scroll over to be able to flip them or exchange the places so we're not handling this case where there's zero items there right so what we can do here is we're listening to we're adding this drag enter listener only on the cards so what we can do is add this listener to the group when it doesn't have any items in it so what we can do here is say let me once again kind of make it easier to see we already made quite a quite a lengthy lengthy splice here so I'm gonna try to make it a little bit cleaner here okay let's format it a little bit better so here we can say on drag start I'm sorry on drag interrupted right on drag enter and we'll say well if we'll do the same thing if we're dragging we can say well if we're dragging and our items so group dot item item I said items think it's items yes group items dot length so if currently I'm asking is it if if we're dragging and we have positive number of items so group items dot length zero which means that there's no no items in the array would be a falsie value so this would fail so we can just flip it and say well if there's something in group items then let's add that handler so we'll do a handle drag inner right otherwise null now mind you we're not besting any values because we still need those params right handle drag in it we need these params no where are we dragging it over well in this case we don't really have an item because there's zero items so we can say can just cut it once again we'll make it a function that passes our event and we'll fire this guy pass event and here what we can say is group I is group I but since there's no items here right so at this point we don't know which item we're doing but we know that there's nothing there right so there's no other items so obviously the very first item is gonna be zeroth so item I could be by default set to zero and in this case if we drag everything here we should be able to do drag it back in there right so we can drag things behind between each other and as long as so this event listener for drag yener on the group only exists if there's no nothing in there so right now there's exist one now we scroll over and now if we try to do that it's not working because it doesn't exist okay so there you go we have our drag and drop between two different groups and this is super cool because we can now basically just expand let's say we wanted more more what's called more cards here it'd be just simple as just expanding this right so we could say now six five six seven group three right if we save this now we have three groups that we can go in between all right which is kind of cool we basically made our very primitive functionality for a comeback combine board right so let's get rid of it and we could say for instance if we don't really have any back-end or anything like that but we could use like local storage to save things and they would stay persistent between refreshes and such but I think that could be expanded if we really care to go on deeper and I'll have to see if there's any one or need for that type of stuff so glad I was able to go through this and hope you guys enjoyed

Channel: asat

Views: 23,861

Rating: 4.9578948 out of 5

Keywords: react, hooks, drag and drop, javascript, css

Id: Q1PYQPK9TaM

Length: 57min 35sec (3455 seconds)

Published: Tue Feb 18 2020