E-Commerce UI Drag and Drop | React.js

hi what's going on guys so in this video i'm gonna build a drag and drop functionality in react.js and i actually got the idea from hellofresh because on this website you have a weekly schedule where you can schedule uh which menu you want to get shipped on um a week in each weekday so for example i built a similar functionality here and i have seven days so seven days here which is a week and i can drag and drop each of these products on each of these days for example wednesday i want to get this on thursday i want to get this on friday i want to get this on saturday i want to get this and on sunday this and when i whenever i drop the last product uh the products block has been replaced with a place order button uh there's a total here each product has a price there is a total price over here uh this button is not clickable now in my case because i don't have any i'm not calling any apis or anything like that it's just the ui but if you want to use an api you can um you can just send all this data because all these data has been stored in a local state so by clicking on this place order button you can send the data to an api uh to prompt the user to uh payment process all right so that's pretty simple pretty easy uh there's gonna be a link in the description from where you can take a look at the live demo i'm gonna have a separate page on my website with this app so you can play around uh there's gonna be a link in the description for where you can grab the source code if you'd like to i'm gonna write everything from scratch in this video so you can follow along with me if you wish so and uh i had an idea on i was thinking to implement this functionality uh in wordpress using woocommerce apis so if this is something that you would be interested in watching like if you would like a tutorial like that please let me know in the comments all right so that being said i'm just going to go ahead and get started i have my app i have my vs code open in my app folder already this is my react.js app it's empty right now and i'll just uh i'm gonna start with installing two packages uh by the way i didn't mention yet but uh to create this drag and drop functionality i'm gonna use this package which is called react beautiful dnd there's going to be a link in the description so you can check it out they have documentation here and one thing very important i wanted to show you here before i get started is the following this is how this drag and drop package works so there's going to be a drag drop context component and then in this component we will have another component which is going to be droppable component and then this droppable component we will have the chargable components which in my case the juggable components are these products and you can switch them around like this you know you can play around with this so um yeah we will use this package and the second patch package would be the css reset you probably already know what that means um which is gonna just reset the whole css from my app so i can um write everything from scratch all the css and stuff like that okay so i'm gonna go ahead and install this npm ad actually another one is going to be the style components i also didn't mention it styled components react so this is the structure i'm going to use this css structure i won't have separate separate files for css and yeah so [Music] let me i will start with this css style component i'll add it now so i'm gonna have npm add styled components and then npm ad that's the css reset package i was telling you about so it's at at last kit slash css hyphen reset and then the main package which is um drag and drop package so i'm going to use np i'm using npm so i'm just going to paste this command in my command line oops all right and now i'm gonna start my app so i'll type in npm start starting the development server and i will open my browser and i'll i'll close this there's gonna be a link in the description for each of these packages guys okay so here i'm going to have localhost port 3000 this is actually the demo so i should should stop this sorry about that guys this is embarrassing huh it doesn't want to stop like always okay so i had the previous i had the demo i had to stop the demo local machine and that's um okay so now this is my react.js app everything works fine i'm just going to restructure a little bit so in my source folder i'll open app app.js and i will remove everything from here and everything i have in my return function all right and here i'm going to create a folder and this folder is going to be components in the source folder like this and here i'm going to have a component which is going to be main.js and this main.js it's it's gonna be a class component so i'll have to import react and component from react and then i will have default uh let's do just class um main and let me see i'm just gonna do extends component and here i'm gonna have a render function and i will return just let's say hi for now and let's export it export default main so i will save it and now in our in my app.js i'm going to import this main component so i'll import it from component slash main and i will call it here in my return function so if i say then i go back i have this high here okay the next thing is to create a few more i'm going to create a few more files there's going to be another folder here in the components folder which is going to be the assets here i'm going to have the images for each product and another folder is going not just assets or you know what guys let's just move it to the source folder so we don't get confused with components and this images guys you can take them from my github repository this repository is going to be public drag and drop react so if you go to source assets you'll have these images here so you can just download them from here okay um all right we have this i call this now in my app js i'm gonna get rid of i'm gonna close that because i'm not gonna do anything else there so now the files um i want to create three more files here in the components folder and the first one is going to be initial data dot js and here i'm going to have the state and then another file is going to be column.jsx and product.jsx like this now in my initial data.js here's where on the state is going to be so as i already said i need to have some images here so i'm just going to go ahead and copy them from my demo folder so i'm going to go to this here exam hd docs and this is drag and drop react source assets so i'm just gonna copy these files from here and let's see if i can do this i can't paste them directly okay so i'm gonna go back my folder source assets and i'll paste this images here so now i have them here and the state is gonna here i want to import them first so i'm gonna import menu one from let's go back one step assets slash one dot jpg jpeg like this and then there's going to be the second one and the third one and then here we will have a const initial data and this is going to be an object and then here we will have products and in this product we'll have the actual products from our drop down functionality so we will have product one and this is going to be an object and then this object will have an id which is going to be product one and then content and the content is going to be menu one it's going to be one of these images and then we'll have the price which for this product is 50. and we will have six more products so we'll have to change this is t to menu two the price ten second one is going to be three three uh here we want to put the menu three the price is going to be six and then here we have four we can leave many one but the price 18 and then the fifth product here we put menu two six you can leave menu one the price is t this this one the price is going to be three dollars many the third menu and this is the seventh product okay now here the next one is going to be the total price state which is zero and then we'll have the products column we'll have that column from demo with all the products from where we will jog uh juggle the product so we have products column and then here we will have products in this column and here we'll have id which is going to be products and then we have title and then we have the actual products id ids and this is going to be an array and this array is going to contain it's going to have um all these products product id so we'll have the first one like this and we'll have seven of seven of them so this is the second the third one the fourth one fifth sixth and seventh okay and then the next state is don't forget about comma the last one doesn't have to have one now the next one is going to be the weekdays so we have days the first one is monday and of course this is an object and monday has an id and id is monday and we also have a title which is monday with capital m and we have the products id products ids because whenever we will jog a product from the products column we will drop it here on one of these days so first one is monday then we will have tuesday and the id is going to be stored in here in products ids this is how we will see the products for on for which day okay we have this in place now we should add for six more days so we have tuesday wednesday thursday friday okay one two three second one is tuesday this is empty and then we have wednesday don't forget about coma because lucky i forgot already thursday friday and then saturday and sunday all right and then we will have an uh a day's warder where we will see the um each day's order it's going to be here just make sure yes days and another state is going to be days water and here we will have all the days starting from monday monday then tuesday make sure that these days these are the ids from here all right so we have monday tuesday wednesday thursday friday and sunday and after this we just export this export default initial data okay we saved it now in our main js we have to call this this state and here below react we import initial data from initial data okay the same way i mean the same time we i'm going to import the css reset import at slash css reset like this and then i want to import the style components and then i want to import the um drag drop context and dropable from the react beautiful dnd so here's going to be drag context and then droppable react beautiful dnd and what else i think that's it for now now um in my class here i want to assign all this state to a variable so i mean i want to assign the data from this initial data to your state so it's going to be state and i'm going to assign the initial data and then here we will have a here actually is where the the the droppable blocks and everything is going to start um in our render function we will have let's have here a lat variable and this that variable is going to be a total price and we assign to this total price the price the total price from our state which is zero because we will have to update it whenever we drag and drop it so we have this state dot total price and now in our return function here we will have to style a little bit all this stuff so we'll have the first uh the first block which is going to be the body block so here below the state using the styled um package i'm gonna have a const and this is gonna be body block so i'm going to have styled and this is going to be a dive and by the way this actually needs to be above the above our class so we don't get any errors or anything like that in our high element we can just put height for now just so we don't get any errors now here i'm gonna have a uh i'm just gonna uh copy the css and i'll paste it here just for the second time guys so i'll paste it here this is how the main the the body block the main body block is gonna look like so i have background color a margin zero padding zero with a hundred pixels height is going to be full screen and display table so i'm gonna copy this uh body block and in my return i will paste it here like this it's going to be like a component and if i put something here and i save it now if i go back to my app you know this is how it looks like the background is not white it's a little darker and um the next thing i want to have a separate block for um for the jack drop context so now here in my body block i'm going to have this drag drop context and i'm going to have it like this and then here i will have a main main title oh wait wait wait main title and then this main title i can actually leave it like this i will say personalize your order your water and then but before i do this actually all this stuff i wanted to be in a separate block which is going to be weak days container i'm going to create this and and this so here we will have weekdays container weekdays container i'll paste it here let's just make it pretty and let's create this weekdays container so i have cons weekdays container style.div and here this is gonna be i'm just gonna paste it in there with this container is going to be a div and this is what i'm going to have in it so you guys you can just guys uh pause the video and copy this stuff from a css because this is basic stuff but i'm going to explain so i have a display table there's a margin 20 pixels uh auto and zero auto means it's going to be centered um and then with 100 pixels max with 1070 pixels background color white border radius and then a box shadow and the second one is the main main title so main title let's add it here and this is going to be styled.h3 tag and this title is going to have the following css so there's going to be a text style text align center heading 20 pixels on the sides uh top and the bottom and zero on the sides font size 25 border bottom one pixel solid uh text transform uh upper case and margin is going to zero zero and just 10 pixels from the on the bottom so if i save it now this is gonna this is how it's gonna look like but this is the thing though you might ask like why am i using this style stuff this is this is the difference you can actually um whenever used we use that package it gives a random class name so for example look this is the main block body one you know d of class this is the weak container weekdays container you know you see there's a random class css class and then h3 tag has a random class name that's why i use it i like i like using this uh it's easier for me to work with i guess it also depends on the project but this is what i'm used for this product project so um in our in my weekdays container i have this title and then i'm gonna have weekdays block which is gonna be below here so weekdays blog and here i'm gonna loop through my state where i have all these weekdays and i'm gonna have to output each of this week weekday to the screen um so before i do that let me just create this block because weekdays is also a has some styling style dot d and uh here is going to be just display flex so just so we have all those columns you know like all these weeks in one line display flex flex direction row justify content center so let's go back to this one weekdays blog sorry about that guys and then here as i said i want to loop throughout my state and output all these columns so to do that i'm going to have to use curly brackets and here i'm going to have this this state that this order this order is from the state if you remember here and dot map so here i'm going to grab the day id okay and then here i'm going to have a const day and i will assign to this cons day the data from the the from the state so we have this state that base and i grab the day which has the the first id so i grab the first law which is monday in my case you know whenever the first loop and then it's going to go through each of them and it's going to grab the data from the days from here by this using this id okay and then i'm going to have another there's going to be another variable products and i'm going to grab the products using this day id so i have they dot product ids dot map product id and here i have this state the products and i have product id like this and then here i'll have just here returns of return and this is why i created this column because this is going to handle the functionality of the column so i'll have the styling and everything for each a column is it's one day so i should probably rename it to days but i have columns because a column means one of the weekday so here i'm going to have return and i will have to create this component column but here i'm going to send a key and the key is going to be they the id and the day is going to be a day and the products are going to be products just close it here like this i'm going to go to my column and in my column here i'm going to import react style i'll have to import droppable and product so i have import react and component from react and here i'm going to have a class so i'll export default class class name is going to be column and this is going to extend the component and for now i'm going to have just a render function and in this render function i'm going to have the return function and this return function is going to handle the whole jsx syntax for this call for this uh for each of these days so here i'm going to have a container div class so container div class and i will have to create this container here actually i just said i'm going to import style and all that stuff and i didn't so let me import this now i have to import style from style style components and i also need to import the droppable choppable this comes from this package react beautiful dnd that we installed and i want to import also the product from product um from the product column which i didn't create yet so so i guess we'll do that later i'm not importing it now but let me create this container div class here i'm gonna have a const container um style dot this is gonna be a give and here i'm going to have the following css which is not a lot it's just a margin 8 pixels border radius 2 pixels with 50 pixels a 50 and me mean height 195 pixels and so in this container uh div class if i can say it like that i'm gonna have a title title and this title is gonna be the column title which is the weekday weekday name so it's gonna be this the props the day the title and now i'm gonna have to create this title so i'll have const title styled dot h3 all right and here i'll just have text align center okay next next is going to be the droppable uh area with all this stuff but before i do that i want to just let's just leave the title just to make sure everything works fine till now so i will save it like that uh yeah we get the title here uh we got this stuff here so let's save it column is not defined i have to import column forgot to import column so i will have to import column column jsx okay so let's go back and see what we have property map or cannot read probably map of undefined so i i think i misspelled something here where is it is this this is in main.js so let's go back to main.js let's see where we have so i have the map here let me see what i did wrong this state order days so we have a day d const day this okay state days order did i miss paulette here [Music] this state okay the problem is here i misspelled it with so in initial state i have products ids i misspelled it here products it needs to have an s so if i save it now go back here we go so we have the days here for each uh we have each like weekdays so okay okay so everything works fine the column works fine now what i want to do is i want to output the products um i want to have a separate block here where i will i can output the products below the week so to do that i'm gonna have to create a separate right below the weekdays container i'm gonna have here actually i'm gonna have another if statement um because here i want to output these products only if the last product is not being dropped okay so i'm not gonna just not to confuse you guys this is what i'm gonna have there is gonna be for now products block like this and now i'm gonna have to create this products block right here const products block style the div and here and these are as are not apostrophes if you if you made it through until now you probably figured that these are not apostrophes they're kind of like backwards apostrophes um which you can press on the uh it's a button below the escape button on your keyboard this is what it is actually here um okay so here i have the products block and the products block has some css and let's see where is that products block um i'm just gonna copy and paste it here um sorry i'm not writing everything from scratch just just just for the sake of time but um so basically this products block is gonna be display table margin 35 on top pixels auto which means it's going to be centered zero bottom for border radius 5 pixels min width 842 pixels background color white box shadow um and all this box shadow and most boxing these are for other browsers okay so uh i have this in place now if i save it and go back i don't have anything here because i didn't put anything on this block so now to add some stuff on that block i have to actually i'm going to have a title here so let me add this title and the title is going to be i'm going to grab it from the states they're going to be this state dot products column dot products dot title title is not the final because i didn't create this block so obviously i'm gonna have to create this const title style dot h3 h3 and here i'm just gonna have adding eight pixels and what else product list there's going to be a product list block but let me see for now how it looks like okay so this is how the block started to look like now i want to output the products here so right below the title there is going to be i'm going to have to use the draggable component the draggable component uh droppable droppable guys the droppable component i imported from react beautiful d and d so here i will have a droppable component and these droppable components actually going to grab a droppable id needs to have a droppable id according to their documentation you need to have a droppable id and the droppable id that was the first droppable id and we assigned to this droppable id the data from this state dot products column and then we have products dot id and now here we have it's another rule that we have to use there needs to be a provided provided variable which is not a variable it's more like a function and in here we have to provide the product list in this kind of function which is an es6 kind of kind of thing so here we have the product list um the product product list is actually also a div class if i can it's a div class name so i'm going to have product list like this but this product list is going to have a reference so it's going to be a ref and that will assign to this rf provided dot inner ref and also it's going to have i'm going to assign the droppable props to this component so it's going to be provided dot droppable props and now in this block is where i have to import the products so but before i okay let's do this i'm going to import the products i'm going to create i'm going to write this component name and then i'm gonna create this this component because this uh product uh component needs to is coming from the product jsx file which is not created yet so i'm just gonna write it here like like the way it is i'll have to loop through my product column state first so i'll have here this state dot products column the products the product product ids the map and here in the map i'm gonna get i'm gonna grab the product and the index arrow function and then here i'm gonna and then here and then here's the product so there's a key which is product and then we have product which is this state product so this state products and we have product as the index and we have the index which is index and then we just close it and also we have to make sure we have this provided placeholder below below this component below where we where we call our component so here we will have provided dot placeholder just like this so i'm just going to save it and i'm going to get an error um i'm going to get an error i didn't create the product product list so i'm going to create this one now const product list and this is styled.div and the product list is just gonna get a pair heading eight pixels like this so i save it and it's saying that the product is not defined just because it didn't create the product yet so now it's now it's time to create this product component now i'm gonna have to import this is gonna be a class and i'm gonna have to import react and component so import react and component from react and then here i'm gonna have to import style from style components and then the joggable component draggable component from react beautiful dnd and here i'm gonna have a const it's gonna be a div class cons um container so i have const container and uh this is going to be a style dot div and here i'm going to have the following css it's going to be i'm going to have a border one pixel solid padding margin bottom border radius background color float left box sizing text align center and fonts font size 15 pixels and then below here i'm gonna have export default class product it's gonna extend the component and here i'm gonna have a render function and this runner function i have the return function and uh and then in this return function i'm going to have a ball i'm going to use the joggable component from the react beautiful d and d so i have oops i shouldn't pause that so i'll just grab this draggable component draggable id and here i have this dot props dot product what needs to be with a lower case oh my god victor okay props product um dot id and this is all also requiring an index so have index this dot props dot index and i will just close it like this and then here of course i have to use the uh provided as i did in the previous uh droppable block so i'm just gonna have here provided like this and here i'm gonna have container container uh and this container needs to get the provide jackable druggable props a drug handle props and the reference in the ref so let's see here we will have to do something like this provided that draggable props and then we have provided the joggable draggable with the jog handle jog handle props and the last one is the reference so we have graph and we assigned to this ref provided that inner ref like this okay and then below here we will have the image so it's gonna be img source and the source is going to be this state dot product dot content and there's going to be an alt tag and the alt tag is going to be menu and we'll add some style inline styling and here we will have width 100 pixels make sure this is in the in apostrophes and we close it and there's going to be a vr tag and then below here we want to output the price because we also have the price for each product so there's going to be this state the actually it's not this state wow i just misspelled everything this state it needs to be props because this is a variable we call it from a different component so where we have state needs to be props all right now we have here this dot product the price like this so this needs to work so if i save it export default class product now i have to import it in main.js file so where we have the column now copy the line not products but product like this menu is not defined it's saying that the menu is not defined for some reason in product line 27 27 okay this menu needs to be like this well let's go back let's see what we've got here okay so we have all these products here they're not working yet but we can um we have them here you know we will output the products and everything let's see if we have any uh console errors we have total prices assigned value and overuse and drop rule is defined but never used okay i will be using this droppable now so let's go back to our columns to the main file and let's see what we can do here if we did everything we we should do so we have this uh we get the return uh column all right um now here we should have another weekdays component here we should have a worder in order info um div class so it's going to be something like this order info and then here's going to be ap tag and we will have the total price so total is going to be total is going to be total price like this the total is here total price is here now let's create this order info div class so this is going to be a const order style dot div all right and this styled let's see where we have the styled [Music] order info here i'm going to have the following css border top one pixels padding font weight uh weight font size and text align so let me save this and let's see how it looks like so this is where the total price is going right this is just what i just added and one more thing i wanted to see just thinking here we didn't miss anything yet we call this column now in our column here we should call this product we should look through this output all these products so let's go to uh column let's go ahead and work here now below the title we will have a droppable um component so we'll use this droppable component and this drawable component is going to have a droppable id of course and we have droppable id and we have this dot props dot day dot id and this is going to have a provider here so we have like this provided and this is a function so here we will have here we will call the the products we will output the products but we will have a product list first so product list like this and here we will have a reference it's going to be ref and we have provided that inner wrath and then here we will have the provided dropable props provided done wait wait wait wait wait all this stuff needs to be in curly brackets like this so provided that droppable props like this we close it here now here we want to uh look through our products and output each one by one so we'll have here this dot props dot products and dot map and we look through we get the product and and the index and then here this is a function and we have this like this and here we will have to call the product component so we get product key product dot id make sure don't misspell it the way i did and then we have the product and the product is product and then index index like this okay and this should work now except i was about to forget the placeholder so we have pro provided the placeholder like this all right let's save it and product list is not fine product is not the final case so we have to i'm gonna have to create this product links list here const product list style dot div and and here is just gonna we will have just the padding 8 pixels and i have to import the product from product jsx so from prawn like this okay so let's go back and let's take a look here um oops sorry about that guys okay so if i drag and drop it i mean we see that it works but it doesn't stay here because i didn't create this functionality there's gonna be like a one change uh method which is gonna be called every time i drag and drop something to this area so that drag and drop functionality is going to be in the main.js file so let's go back to main.js and here where we have our where is the main drag drop con context there there's going to be on jog and on jog and this is going to be a method we will call this we'll have to create this method it's going to be this on drug end all right so uh let's create this method above our render function and this is gonna be a kind of long method but this is gonna have the whole this is the whole logic behind um this drag and drop stuff so we have result we'll just have a result what's this called jesus christ anyways parameter there you go so what i guess okay we have the onedragon result parameter and then here we have const and [Music] so by default here i'm gonna get the destination source and draggable id this is gonna be returned by the package by the main package which is react beautiful dnd and i'm gonna do a console log so you can see what's inside um so yeah here i'm gonna have destination destination and then let me see if i'm gonna get destination there's gonna be the source and the joggable id like this and here i'm just gonna assign everything from result so all this data is going to come from the result and let's do just a console log for now so you can see how result looks like all right so if we go back i'm just going to open my terminal and um so i have destination assigned volume over use blah blah blah blah so look if i grab one of these products and i drop them on monday this is when that method gets fired whenever i drop something this jack um on jag end so here's how the result looks like uh here i have the destination draggable id which is product one which is true this is the product one and the source and in the source we have the joggable id which is product all right so having all this data um i can play around with it i can i can update the state according to this so um you'll see while well i'm going to write that logic from behind this okay so uh let me just leave this i'm going to leave this console log here and i'm going to have an if statement which is going to check if uh if is different than destination or if destination droppable id destination dot droppable id equal to products i will return nothing which means if i grab this from here and if i drop it somewhere else it doesn't have a destination it's not gonna change anything i don't want it to change anything or if the destination um if i drag and drop it here back then i don't want it to do anything right so i'm just gonna just like a validation kind of thing okay now below here i'm gonna have another if statement so this if statement is gonna be like this if destination dot droppable id equal to source that droppable id and um destination dot index equal to source dot index then in this case i want to return nothing as well and then below here i will have a const start and i will assign the source dot droppable id droppable id so this is going to be like a new stain actually i should assign it i need equal sign here and here i'm going to kind of check if the sorry guys if the source source droppable id it's equal to products products that's from the state this one right so if this the droppable id is equal to products then i assigned to this variable this state product column so this dot state dot product column products column and this is going to be an array so here i'm going to have source dot droppable id otherwise i'm going to assign just this state dot days source dot droppable id dropable id and then there's going to be another variable const finish and to finish i'm just assigning this state dot days um destination dot droppable id all right and then below here i'm just gonna create the functionality for moving from one list to another and i'm gonna have a const variable here is going to be start products id ids let's do start product start product id like this and i'm gonna have an array from i'm gonna create an array from uh source dot droppable id and if this i'm gonna assign this only if it is um so it's this is the if statement if the source dropable id is equal to product then i'm assigning the start dot product ids product ids product product ids needs to be product product ids actually needs to be products ids because here you remember i misspelled this it's products ids um yeah start dot products ids and then start the product ids products ids okay the next one is is a i want to splice it so start product ids dot splice source dot index one i want to remove one and then here i have a const new start grab the start current start object and then the product products ids and here's going to be start product ids like this i hope i'm not confusing you guys here because i i'm almost confused to you but i'm still i keep track with these product ids just because i misspelled you know i misspelled it here i'm just trying to keep up with that okay so um yes we have this in place just do this like that um and then below here we will have another const which is going to be finished product ids so we have const finish product ids array from and we get finished product ids finish dot products ids and [Music] below here we will splice we will remove one from them so we will have finish finish product ids [Music] dot splice and we'll remove one of them so we have dot supplies and here we have destination dot e-index and then we have zero and then draggable draggable id and then here we have const new finish and we assigned it the current finish object and then product products ids is going to be finished product ids okay so we have this in place and then here we will remove the item we have to remove now the item let's save it and let's see what we've got finish is not defined finish not defined because i i misspelled it const start finish finish finish um blah blah blah blah blah used to be finnish with h where is it let me spell it here like this where is it line 111 like this okay so let's go back let's see what we've got here do we have any errors here no okay we can't really see um many changes here for now so let's uh let's just keep going here okay um update on the price now i just want to update the state so i want to update i want to make them stick to those days so i'm gonna have a const new state so here i'm gonna have the current i'm gonna grab the current this state and then i'm gonna have the total price total price pairs before actually let me just update the price first here so updating the price and then i have a const current item price and if this one is uh current pro i and i assign so if the source droppable id is products droppable id is equal to products then i assigned this state dot products this state products draggable id dot price otherwise it's zero so so which which means uh this means the following if i grab this use this products only update this price only when i grab the products from the product block only want to grab them from here only in this case update if i switch them here and between these columns don't update price just make it zero okay so we get update the price now here total price it's going to be let's do first integer and then we have current price and then plus purse in and we have this dot state dot total price and then here we have days which is an object and we grab this state dot days this is the current object and we update um with new start and start.id we have new start and the new finish new finish um new finish and then the next one is going to be the products column products column and we grab the current this state the products column and then below here we just update the state so we have set state and here we have new state okay so let's see what kind of errors we have here it doesn't stick in there okay let's go back here let's see what we missed because i think i missed something here okay so um this is what i missed here i should put id i missed the id from here so if i save it now and if i go back so refresh it everything works fine the total price is updating tuesday there's just one thing though whenever i grab these products from here they don't disappear so i want them to disappear in order to make them disappear i have to add a new there's going to be a new if statement here so let's do it right here okay so i'm going to have a new statement it's going to check if source dot dropable id equal to is equal to products then we have a const there's going to be a new p ids new which means new product ids and assigned to this variable the state from this state dot product call products column dot products dot products ids like this and then i'm going to have another const it's going to be prod remove and i assign the draggable id and then i have another const variable which is going to be remove index going to be ram index and it's i'm going to use the new p ids object dot index off just to grab the index of prod remove like this and then i have new p ids dot slice so i just remove it from there ram index and i remove just one okay all right so if i save it now if i go back refresh this page put it here you can see that they disappear from here and now i just grab them so second one the third one fourth fifth sixth and seventh now i want to output this proceed where like place order button whenever this is empty i want to replace it with that so to do that i should go back where is let's see updating the price um lower lower and lower let's do it here where is the products block so here is going to be an if statement which is going to be like this if this that state the products column dot products the products ids dot length if this is different than then zero [Music] then i want to output this like this otherwise i want to output that button so i'm going to have a button which is going to be called place warder like this and this is going to say place order so let me create display place water div class it's gonna be const place order style dot d and this placed water it's going to have a little bit of css display table margin padding with 100 pixels max with 350 pixels color white background color kind of green text align center text trans uh transform upper case fonts font size 17 pixels border radius 5 pixels and the box shadow so let me save it now let's go back here refresh it and do this and this and here we go and everything has been stored in the state so you can implement this functionality whenever click on this button you have an on click method which is going to call an api and send all this data so that's it guys for this video i hope you liked it if you if you enjoyed please give it a thumbs up if you have any questions leave it on the comments and subscribe for my channel and i'll see you guys in next videos

Channel: Vicode Media

Views: 1,498

Keywords: reactjs, react, UI e-commerce, react drag and drop

Id: NUfkzmnXQYQ

Length: 76min 40sec (4600 seconds)

Published: Tue Jan 19 2021