React shopping cart with context api for state management. Project build full tutorial.

[Music] hello everyone and welcome back to the channel in today's video we're going to be learning how to use the context api in react for state management and we're going to be making this project here uh it's just a simple enough shopping cart if you click on add bask at the basket you can see the icon up here is displaying how many items are in our basket and if we click on the basket then we can see all the items that we've added to the basket and we can remove them and the car total is um updated every time we add or take something out so if we add in the apple watch say here you can see it um adding up the new total um so just close that now and guys if you haven't subscribed to my channel would you please consider liking and subscribing to my channel it helps out my channel in russia and it keeps me vo motivated to keep creating these videos thanks very much okay so we'll get started with today's project in so just going to create a file so create your folder that you want um open vs code then we'll open that folder that we just created okay so open up your terminal in vs code then click terminal on the top and click new terminal and then down inside our terminal npx create react app so we just type in npx create react app then do a space and do a dash and what this does is just going to name it the same as the folder name so our project will be called shopping cart react shopping cart context api we're not giving it a specific name okay so press enter then this will take a few minutes to install so i'm just going to pause the video here and come back when it's finished creating the react app okay so now reactors finish initializing the project so down on the next command line then we're just going to start up our app so do npm start okay so now you can see a react project is running on localhost 3000 so inside in our source folder just going to get rid of any files we don't need at the minute so i want to get rid of the logo file uh react is going to draw some errors now for a minute while we're deleting these uh we want to get rid of the app test setup test app.css inside in our index.css we're just going to delete everything in here and then in our app i'm going to get rid of the two top imports and we're going to get rid of everything in say the main diff if we delete dash and save that now now we refresh our page now we can just see our shopping cart that we've displayed here so we're ready to start working on on our project now so for most of the css i'm just going to copy and paste it from my git repository i'll leave a link in the description if you want to follow along you can just copy and paste it from the git repository there's quite a bit of css and some of it i don't want to delay the the video make the video any longer than what it should be so inside our index.js our index.css sorry i'm just going to paste in some css to start us off and wash and what i'm just doing is in here is bringing in a google font um sit some uh pattern and margin um to find families and the h ones and the paragraphs and then just styling the scroll bar a little bit that's all we're doing in here so let's save that file now and close that now we won't be needing this file any longer okay um so we're going to inside in our source folder as well i want to create a file called data.js and this is just a json object that i have created which is some products in here so i'm just going to copy and paste this from the git repository as well which i'll have a link in description too so i'll save that file then so we have six products in here and i just have a name and an image coming from a website called unsplash just an image for each and the price i'm just going to toggle the view here now view toggle wrap okay so these are going to be our six products starting out with so just close that file now index.js close that file so inside in our source folder again we're going to create another folder called screens okay inside this folder then i'm going to create two files first one is going to be home screen.js and then we have a home screen.css okay so and we'll create another and for the home screen css i'm just going to copy and paste it in as well so we're just displaying flicks and display flex wrap we're giving it a max wish and then we margin and the gap for all the products inside that's all that's doing close that file okay so inside in our home screen.js then we're going to import the products from the data file the data.js file so first we're going to import them import bookcall and products we create our our function first and i'm using an extension called what's the name of this es7 react redux uh graphql react native snippets and i'll show you what this does it's a shortcut for starting note react functional components so you can just install that or you can type them all out either entirely up to yourself so if i say underscore a f c e now you see that it inserts the functional component first okay so we lean up the very top then just create a piece of space for ourselves and we'll import products and we're going to import that from one folder up so dot double dot our slash data and we'll import our css okay so we wanted to display out all our products first so we'll open up some curly braces to put in some javascript and we'll say products.map which is going to map through all our products in our data.js file so we'll use the map function and we're just going to call each um single product a product so for each product and some round brackets um first we're just going to just to make sure it's working we'll display the product that name and i just how i'm doing that is if we open the data.js file inside products i'm just taking the name so close dash now we need to bring it into our app.js file first so we just save that file inside our app.gsten going to in instead of the shopping cart here we can just say home screen and reactors after finding the home screen for me so if i click on that space now it's after importing it automatically for me but if it's not after importing it automatically for you just on the very first lane import home screen from that slash screens home screen so if we save that now now you can see the list of all our names of each of our projects so we know the map function is working correctly so so the next step we're going to do inside in our source folder now we're just going to create a components folder and inside our components folder then we're going to be creating a product card and this is where we want to display all our products in each each project is going to have its own card so create a file here product card dot js okay and we'll also need a product card.css so i'm just going to copy and paste into css again i just have some media screens to set to wait on different size screens and css is straightforward enough um if you're looking to know how to do the react context api and i take it that you know css already so i'm not going to dwell too much on the css you can see they're just adding some css for buttons and things like that and hover effects okay so save that css file in our product card then and eventually then what we're going to be doing with the product card is in our home screen instead of displaying the the product name sorry the product name we're going to be displaying this product card so we go close our product card css and go into our product card js so i'm going to create another functional component okay see inside our product card in the mean div then we're going to give this a class name of product card wrapper two underscores then we create another div and inside here we won't have an image i want to give the image a class name product card image give this a class name a product card image and for the source then we're going to be passing in the products from our home screen so we need to go back to our home screen for one second and pass that through so inside in our home screen i want to import that product card that we're just creating so inside in our components folder product card so here instead of product.name put in two round brackets and the product card i want to give it a key and just toggle the view on this note target word wrap so the key is going to be a product dot id then we're going to pass in the product as itself so the product is going to be equal to product let me just close that component then just close this here now save that now go back into our product card and the source then is going to be open curly brackets product uh up inside our first set of brackets we need to destructure our products that we're bringing in so we have a product and down in here and then we want to display the product dash image now if we save that in now we can see our six images are coming from the data object so we're just going to quickly fix it up now so that's our image brought in after the image we're going to have a h4 and the h4 is going to be product.name after the then we're going to have another div we're going to give this a class name of product card price underscore product card underscore underscore price so inside here we're going to have a h5 and just going to be product.price so if we save that note now you can see that we're getting our product name and our price so now we just quickly go back to our home screen and once we give this a class as well we're going to give this a class of products underscore wrapper save that now and then we want to play our product card css styling so inside product card.js we want to import the slash product now when we save that shot our product card css styling has been applied so we have the nice border around each of the images we have the name and we have the price of each item okay so to display the number as a currency i'm going to import package node package so down in our terminal then just if you press this little plus button here it opens up a new terminal and we say n pm i for install format currency press return we just wait a second for that to install okay so now inside our package.json you have it you should see it here format currency is installed so we go back to our products card we're going to import dash so we'll see import for our match so import pharma currency from format currency so don't worry we're displaying the price just going to delete this for a second inside in our h5 so we want to display we'll open up our curly brackets again let's say format currency and then we just used the backticks and inside here we're going to use the dollar sign and some more quarterly brackets and we'll say product.price after that we have to put in some options so up on just above the return we'll say let options um so we'll set this to format all this is in the documentation for this um package you can just go to the npm website and and look ahead also we're going to set it's going to be percent s percent v and then we're going to set a symbol and we're going i'm going to set this inventory euro sign you can set it to your currency if you wish so if we save that now sorry i have a typo that should be a percent now you can see currencies i'll have the symbol in front of them now i'm going to create a little icon in for displaying the ratings so if we look at our finished project we could see all the stars here and the reviews of 12 okay um well actually we'll add in our button first so just below the product price we'll add in a button we'll give it a class name it's going to be equal to product card underscore underscore button and reduce in here we have add to basket now we have our button okay so we're going to use font awesome for the little stairs so all these little stars are going to be created by a font awesome so if we go and go to just go to in your browser and go to cdnjs.com and in the search option type in font awesome now on the main version then we are going to just copy that tag so inside our public folder then we go into our index.html and just above the title then paste in that link save that close our index.html file then so inside in our components folder again we're going to create another file called written.js i'm going to call another component so inside here we're going to create another functional component now we're going to install another um package as well here after spelling rate and run so i'm just going to change the file name as well okay so we're going to install another package um called uuid and this creates a unique id for us so down in our terminal again we say npmi uuid second to install again okay so in our package.json we have uid now installed and this is just going to create a unique key for each star that's going to be displayed it's going to give it a unique id so inside our products card we'll get ready for this for so inside our products card just above the button that we've created a second ago we're going to create a div and we're going to give this a class name of product card underscore underscore written actually this should be a capital p open line 11 for the product card price okay so inside today for the product card written what we will be using that one we're creating for the rating so react is after finding that for me already source after automatically importing for me so if you if you need to import it yourself if react didn't import it for you you need to type in this lane on line 3. so we'll save that now so we go you know ratings then we're going to pass in some things and pass in a value the value is going to be equal to the product that written then we're going to pass in some text and the text is going to be equal to just going to open some backticks so we can use concatenate some string with our javascript so we use the dollar sign and curly brackets to do that and we're going to say product dash gnome reviews and then just after that we do a space and we'll type reviews so we save that and just show you in the data js as well here's our ratings that were taken and here's our num reviews so we go back into our ratings.js file so we're going to destructure the values we're passing in so we'll use curly brackets and we're going to take the value we want to take the text and we want to have a caller now we didn't pass in the quarter yet so we're going to set a default value for dash so to set a default value go down below our component and we'll say rating and default props now we set color is going to be f 4 1 c okay so if we don't pass in any of these values we can set a default prop so for we're passing in a value and we're passing in the text prop and for the caller one react can't see a caller so we have a default prop down here so if you had to pass in a caller the rate and default props would be overwritten with the prop that was passed in but as we're not passing in a color prop we're going to be using this color here okay so for our class named in for main div it's going to be written and inside here we're going to use some javascript so we'll open our curly brackets we're just going to set an array for five objects all numbers one two three four five because we have five stars and we're going to map this array and we're just going to give it i'm just saying it was a rating there and for each of the one each of the items in the array we're going to return a span and the key is going to be equal to the uuid so we need to bring in uuid and the way you import uuid is you open curly brackets and save v4 as uuidv4 and that's going to be from uuid so the key is going to be equal to [Music] uuid v4 but that's going to create a new uh unique id for each of the stairs so inside the span then we want to have an eye tag and this is going to be the fun to and style is going to be equal to color i'm going to give the class name just close off our eye tag there so the class named is going to be based on what rating is so we're going to check if it's um if it's a half star first so we're going to save the value that's passed in plus one if that's equal to raise plus 0.5 uh i don't then we're going to have a class name of f a s f a slash star odd and then we're going to check if the value so if the value is greater than or equal to the rating we're going to put in a full star so the class name for this instance is going to be f a s slash f a slash star otherwise then is going to be an empty stair so it's going to if we are fa slash star so if we save that now now you can see all the ratings is coming true for us so if we open up our data dot js now you can see for the first product we have a rating of 4.5 so we have four stars fully lit up and we have a half star and for id 2 we have a rating of 4 so on id 3 has a rating of 3. so just to go through that again we're mapping through an array of five and we're for each one we're returning we're checking the value that's passed in so the first one would have been 4.5 so we're checking if the value plus one is equal to rate plus 0.5 we're going to give it a half stack so the value that was passed in for this one was 4.5 so 4.5 plus 1 is 5.5 and then we're on the fifth star which would be ratio of 5 so 5 plus 0.5 is 5 5.5 so then we get a half star on the fifth star and then all the rest are just checking if the value is greater than or equal to rate we're going to put in a full star and if it's not we're going to put in an empty stair okay so then after that then we're going to put in a span and inside this band then we're going to return the text that was passed in or sorry if there was a text it won't return the text so what the double ampersand checks is if if a test passed in has text we're going to display the text so we save that now now you see we get the number of reviews 8 reviews 12 reviews 12 10. so on so forth so that's our card done and we have a rating done we have the button okay so next we'll create our nav bar so inside in our components folder again we create two new files and nav dot js and we create another file nav dot css so in the nav css and just contact copy and paste our css and it's like again straightforward enough to css so we're just sitting in the nav we're just playing just a color is going to be white we're displaying flicks and then we're centering our items we're setting a height and a background color and we're sitting the position to fixed so it's going to be always on the top so fixed of top zero left zero rate zero so it's going to take up the full weight of the screen and then for the left section of the nav giving it a display flex of one and the middle is one and then just input wrapper i just have a search thing in there and then the right section i'm giving it a display flex of one so each section is going to take up the same uh portion inside and the nav and then our item count that's the little red icon that displays so many items are inside the cart so it's just setting the color and we're giving it a zx z index of 10 so as i was going to be on the top of the card icon and we're just setting it to a circle with border radius 50 percent then just setting the the height and the weight and we're sitting the top and the right in as well so close the nav that css you can close some of these other files too we don't need these yes okay so for our nav js then create another functional component and we're just going to have a nav element and inside the nav element we'll have a div and we set the class name is going to be equal to nav lift and we give a text of store and we have another div here then i'll give this a class name of nav middle so inside here would have a div and class name is going to be input wrapper inside here then we have an input type will be text we don't need the name and id get rid of them then we'll have an eye tag and the class name is going to be a search icon so font awesome icon for dashes if a yes if a search so after the middle section then we're going to have our our right section so we have another div and the class name is going to be equal to nav right and inside here we'll have another div class name is going to be equal to cart icon and we'll have another eye tag in here i'm gonna have a class name it's going to be equal to [Music] if a if a shopping cart now save dash we go back to our app.js and we'll import the nav so above our home screen nmv so react is after automatically import and dash so now you can see our nav is displayed and inside in our nav we need to import our nav.css okay so now we have our navbar and we have all our cart items inside here the color is not working okay if i type off or the color inside rating just refresh the page and the color is working now okay so now our color is working so we'll start working on our our context now and our state management okay so inside in our source folder then we'll create another folder for context so source create a folder called context so inside our context folder then we're going to set a another folder we're going to have a cart contents context another folder cart so inside the cart then we're going to push we'll set a types file types.js and then say sorry we want to move the types into the context folder so now we have the types inside our context folder and inside our cart then we're going to create three more files so we'll have a cart context.js create another file for cart reducer.js and then we're going to have a cart state.gs so okay so for our cart context here we're just going to set up our state our context so we're going to import um open our hourly basis we're going to import create context from react and then we're just going to declare a card context so we'll say const character context and that's going to be equal to create context and then we're going to export that so we can use it now we'll save that then we're just going to set up our types so inside inside in our types.js file i'm just going to copy and paste these in as well so we want to have three types we're going to have a show hide cart add to cart remove cart and they're going to be equal to the same so inside in our types js you can just pause the video and type in these so i'm going to save the types i'm going to close the types.js i want to close the cart context i'm going to close some of these we don't need them for a minute so now we're going to start on our cart state so so we're just going to import a few things to get started so we're going to import uh i want to import user juicer from react and we're going to import our um cart context as well so we're going to say import see a cart and that's going to be imported from character context and we're going to import our character juicer as well and we're going to import our types so from types we're going to import show hide cart and we're going to import add to cart and remove item so we'll so then we say const cart state it's going to be i'm going to use the children prop because we'll be personality state down to our children and then then we'll export default cart state uh so in our return then we're going to use the cart context.provider so say cart context provider okay so i'm going to set some initial state first so above the return let's say i want to say const initial stage we're going to have a state for [Music] sure cart and initial state is going to be files and then the cart items is going to be an array down inside in our value then this is where our station will be so we'll say show cart and the show cart is going to be to state shaw cart and the cart items then it's going to be the state state of cart items okay so we're going to set our use reducer now so we want to say const and this is something like to use stage hook so our user juicer hook is going to take a state and then it's going to have a dispatch and then that's going to be equal to use reducer and we're going to use our card reducer and then we want to pass in the initial state okay so we want to have two functions also so i want to set up these functions now so we're going to say const add to character and that's going to take in an an item that's being passed to the cart and once we call this function then we want to dispatch to a reducer so we want to say dispatch and we want to pass in the type of add add to cart and then the payload we're going to pass in we're going to pass in the item okay so then we want to add the function down into our cart context provider so we just say add to cart we'll have another function for the show on the height cart so we'll say const show makes a narrow function for this then we just want to dispatch and type that will be dispatching uh so we're just going to say show hide cart we're not pressing any payload for that we're just going to be setting the boolean to true or false and so we want to remove an item as well so we're going to have a function for that so let's say const remove and that's going to take in an id that will be passing in and but then once this function is called we will be dispatching a type of remove item and then the payload is going to be the item id okay so we need to add the shaw cart as well and we need to add in the remove item so that should be it for our cart state in we have our initial state with a shortcut of false and a cart item as an empty array start note and then we have a function and add our items to cart show hide cart and remove item okay so to use just our cart reducer then so we're just going to import our types again so we have our show hide cart and we have our ad to cart and we have our other type of remove item so let's say hopefully um our reducer then so we say const cart reducer and that's going to be equal to then we just export our reducer so inside our character juicer we're going to have the state and then we're going to have an action the reducer is listening for an action and that's going to be the type that's passed in so we use a switched in on the switch we're going to see the action dot type so the action that type is coming from in the character stage you see when we're dispatching dispatching or passing in a type so when the action is listed there's going to be a type attached to it so on this so the we're just going to set a default first a default for the switch and the default we're just going to return the state okay so of course we're going to check uh i'm going to say case it's show hide cart so if that's what it finds and then we're going to return the state i'm sorry we need to put this in a return first and we'll move this into our return and then we're going to the show cart so the show part of our stage we're going to set it to whatever it's not so we use the exclamation mark and we use state dot show card so what he's doing here is when we dispatch to action type show hide cart we want to return the state and then for the show hide cart um if it was set to files it's going to set it to true and vice versa if it's true it's going to set the files so then we're going to check uh case if the action that type was add to cart then we're going to return i want to return to state again and we're going to add to our cart items array so we say cart items and that's an array so we're going to take everything that's in the cart so we so we say state dot cart items and then we want to append to that in the action.payload so what we're doing here is when the action type lord that gets passed through was add to cart we're going to return out of our state and then we're just going to change the cart items part of the state and we're going to take what this piece of code here is doing is taking everything that's in the cart item state and then we're adding to that the action that payload so the new piece the new item is going to be added to the end of the cart items so um with one more then when we want to remove an item so we say case remove item and we want to return and we're going to return our state again and then this time we're going to remove the cart item so our cart items pieces date again so in our cart items we want to go to our cart item state so we say state dot cart items and then we're going to filter them and we're going to use the filter function and for each item then for each item if the item dot id is not equal to the action that payload so what we're doing here is we're returning the station sorry close dash okay so what we're doing here if the remove item is passed in for dispatch and remove item we're returning the state and then our cart items we're going to filter all of the cart items and any of them that's not equal to the id that was passed in where we're going to return them okay so now we have our card reducer let's save that now and to use the context then in our app we need to go to our index.js um we're going to import our cart stage and i want to import that from that slash context cart and then our cart state and then we're just going to wrap our app into cart context car state sorry and we move our app up into our cart state now so now our all our app has access to our cart state so we can close that now we can close our cart stage close our cartridges and then back in our cart state inside in our context our cart context.provider we're going to use the children prop so if we scroll down and inside here we want to tell it pass it to the children so we save that now there's a good chrome extension called react dev tools i have it in start here um i'll just show it to you first go to new page so in the chrome um web store if you want to just install this react dev tools and it is very useful for checking stash um when you're using the context api it shows you everything that's in it so if we go back to the one that we're working on all you need to do i'll just make this bigger for a second so you just right click inspect and then scroll all the way down you should see your components click on components and then on the context provider now you can see the children app and the value here's our state we have a function add to cart cart items remove items the shortcut is false and the show hide cart function so just closed that for a second so we can start using our state now inside all our components so now we're going to go back to our components and we're going to go to our product card and we're going to start using our station here so to do that we're going to import card context i want to import that from dot dot slash context slash character slash card context and then inside just above the list options i'm going to use that so we're going to say const i'm going to destructure our context we're going to take the add to cart function out of it so if we say add to cart and we're going to say use context and context we're going to use is the card context and we need to import use context from react as well so import use context from react okay so we're going to put this function on the button so if we scroll down to the button i want to say now and click here um on click is going to be going to call that function directly so we're going to put round brackets uh add at the cart and we're passing in the product so now if we save dash okay so we just make this bigger now make sure it is working so just make that screen bigger i'm going to open up the inspect tools i'm going to go to the components and we're going to look at our station we have our cart items there is empty at the minute there's just an empty array so if we click on the add to basket character items we have an error so quickly go back in here cart items go to our cart stage what have i done wrong here oh there should be an s character items character items state that card items just check a reducer add to cart cart items okay that should be all good now save all if we go back to our app just refresh that now so our cart items is empty if we press add to cart now now you can see if i expand that now you can see our sony camera was added to our stage and if we add to basket on the headphones we know we have another item inside in our array okay so that's working for us now just close that so we have the functionality now to add an item to the cart okay so inside in our navdin we can use our context as well so we go to our nav.js just going to close some of these here now inside ournav.js down here for the shopping cart we want the icon to appear when there's something inside in our cart so so to get that little icon passing up we're going to say if oh wait no we're going to import our cart context first context and then it's going to be from the cart folder and cart context then just above the return we're going to use dash so we're going to say const and we're going to use the cart items it's going to be equal to use context we need to import this as well and we want to use the character context so we say import context from react okay so down here we're going to open up some curly braces and we're going to check if the cart items is greater than zero uh so if they are we're going to have a dive i'll give this a class name of items code item and inside here we'll have a span and inside this pan we'll put the carrot items lint [Music] let's save that now okay so we will check it out now if we add something to the basket okay it didn't display oh sorry so here when we're checking we need to check the character items that lent if that is greater than zero now now you can see it's displaying the little two so if we add something else it goes to three four our nav bar staying at the top so we'll get working on displaying the cart now the character's not displaying for us we haven't got a card set up yet so insulating our components folder again we're going to create cart dot js and then we're going to have a cart at css so i'm just going to copy and paste into cart css again so the css is straightforward enough and however we're just going to have a rotation and close button that's all we're really doing in here so i'm going to close that and for our cart so we'll be using our context in here again so we're just going to import that to use context first and we're going to import our css i'm going to import our character context from the cart and cart context we're also going to use to form a currency package we installed earlier so we're going to use that so let's say const cart set this to a an arrow function then we'll export it at the end okay so let's see how far variable here for our context and inside here we're going to we'll want the shortcut stage we want to carry items and we want to show hide cart and we're going to never use context hook and then we're going to use the character context okay so then we're going to set our options again like we did for our format currency so it's going to be an object and inside object we want to have format percent s v and then the symbol okay so then inside here inside now return i'm going to open up some curly braces and we're going to say so the shortcut so the shortcut originally is a boolean is either true or false so once a short card and by saying show cartoon and so on it's going to check if your card is true so if your card is true then we want to return a div i'm going to give the class name of card wrapper and we will have another div inside here i'm just going to play some um inline style in here also so style is going to be equal to text to line i'm going to set the text line to write and then we're going to have an eye tag i'm going to set some in line style in here also and we're going to set a cursor pointer we give it a class named in and we'll say if a a slash times slash circle and we'll have a function here and say on click so that's going to be on click it's going to be show hide card so then for the cart itself okay so then we'll have it um a div class name here will be equal to cart inner wrapper so we want to check the cart items and we want to check the lint if the length is e is equal to zero excuse me we're going to have a h for and in the h4 we'll just say the cart is empty so if the character is not emptied in i'm going to display another list and in the unordered list then we're going to map through the cart items you can see how useful the context api is for past and state now so we're going to say for each item and for each item then we're going to return another component and we're going to call the component cart item we'll be creating this now in just one moment i want to give this a key then and that's going to be the the key then will be the cart id or the item to id item dot underscore id and in the item we pass through an item as a prop as well and the item will be the item so then for the end the car total we'll have another div um class name the class name is going to be equal to [Music] cart and then cart total inside here we have another div and we'll display some text and we'll have one more div then and we'll set some inline styling for this and say margin margin lift we'll set the margin lift to five and inside here we're going to use our format text our format currency sorry and inside here we're going to get to total of all the cart items so we're going to we're going to use the reduce function here so we say cart items dot reduce so inside here for the reduce function we're going to use the amount first and then for each item then we're just going to simply do the item that price plus the amount and what the amount is is the previous um amount that the reducer function is after adding up to this stage so it'd be if it was three items the amount would have been item one plus item two and then we're at for the third item then we're just adding the item priced to the previous amount and we want to turn it to start at zero and then for our format currency then we're going to pass in our options and have a set options above i have okay so let's save that now and then we want to bring it into our app.js so inside in our app.js where is our app.js in between the nav and the home screen i'm just going to import the cart actually i won't import it yes because i have to create the cart items first so inside in our components i'm going to create another file called cat item i'm going to create another file cart item dot css so for the cart item css as well i'm just going to copy and paste it from the repo and then inside in our cart item just going to create another function then and we're going to be importing some states in here too and the state for past intruding is going to be the item we're passing in the item from our our cart and now we're going to import our context and use context i'm going to import our css and we're going to import the character context also so our context folder and our cart and our card context so what the context we'll be using in here we're going to be using our to remove item i use context and that's going to be a character context okay and we're going to be using our pharma currency as well so i'm going to import that and we're just going to set our options as well for our farm mashed currency so what will we return inside in this component we want to return a list object a list item i'm going to give this class name is equal to cart item item we're returning the image and the source is going to be equal to the item dot image and after that we have a div i'm going to return the item name and we're going to have to format currency i will use some backticks here again and the dollar sign curly braces i t and item.trace add in our options okay and then we want to have a button to remove the item so we have class name equals cart and cart i'll just go underscore button and we'll have an unclick on this button and that's going to be equal to call the function directly so we'll open with round brackets and we're going to remove the item and we're passing in the item dot i id okay so now we go back into our app.js and we're going to import the cart okay don't cart item is not defined or we need to import the cart item into cart so we'll go to cart and after cart item you press ctrl and spacebar it should import it for you okay so it is cart item from cart item so we save that now okay so we just refresh this if we press the cart we haven't been on clicking our nav for this so we go to our nav dot js and okay so on our i tag we're going to push an unclick event and we need to import it from the cart context so we're going to say show show hide cart so down here on the icon we're going to have a non-click and that's going to be equal to show height cut save that now now if we click on our icon we get our cart the cart totaled undefined equally so we're after forgetting something here so in our car total let's see we have after forgetting here inside our cart so where have i the error that looks okay there or open our options that should be a small s so we could save that now now we have the card total so if we add something to our basket we have the cart item photo or in our button we forgot to add the text so in our cart item in our on click we'll have we'll put in some text here r e n o p now we have to remove so just expand that now so now we have the sony camera 89 uh we put in the headphones i see the total iphone and a car total is getting updated the whole time for each item so we removed them everything got deleted from the cart which shouldn't happen okay let's go into vs code and have a quick look and see what's going on uh go into our cart item remove item and click remove item id okay so this should be an underscore id save dash and i probably done the same in the cart reducer so remove item yeah there should be an underscore here too so save that now let's have a look and see how it's looking okay so now if we add a few items to our cart we open the cart and remove now it is removing each of them and then our cart is empty there's an issue here our little close button is missing so let's go back to vs code and see what's wrong here in our cart js on click show hide guard um this should be times so down on 90 machine typing times let's go back to our app refresh the page so if we add some items to our basket now we see we have two items we open up the cart now we have the little clause icon we have the total we can remove we can add items we click on the close break icon it's closed thanks very much for watching if you like the content i'm producing please like and subscribe to my channel it keeps me motivated to keep creating contacts for the for this channel thanks very much for watching the video and we'll see you in the next video you

Channel: tommykelly100

Views: 11,546

Keywords: context api, context api explained, context api hook, context api react, context api tutotial, context api vs redux, react ecommerce project, react shopping cart, state management react, react context, react, react hooks, react hooks tutorial, react context api, web development, shopping cart

Id: BmVVkpCBWpQ

Length: 96min 13sec (5773 seconds)

Published: Tue May 11 2021