In this video, we see like, oh, when we click on add to basket, the items are getting updated,
but we can't see the products that they added to the data, so it's out to retrieve them.
So for us, basically what we do is we will want to check on Dargis.
And yet.
Like, we have to map, like we have to import the dispatch and state using the state provided you state
value and then map through all the products that are present in that it so that if there are three products,
we want three checkout products to get rendered.
If if the basket has four items, then we want Ford to get rendered.
So how to do that?
I'll be deleting all of them.
And then here it is.
So since I'll be using the map function that JavaScript provides me so that we can map through each
and every item of data and we're creating a JavaScript object.
Basket dot map.
So use this basket.
We have two important savvy importing now.
I've been wanting to use state value from state provided.
So long as they import this now, I can use the state and dispatch.
To get my basket of debt restructuring and then dispatch.
So now I've set up my data.
You know, I can use this like I can use the basket and call the map function.
So what this does it, it will look through each and every item.
Can we look through each and every item and then we can.
Quality product.
With these props.
So we can send the.
Ideas items are tidy.
When we have any problems, I know we lose equals to.
So it will be item not really.
So the JavaScript object, it should be inside calibrations.
So that should mean there shouldn't be any Comisar columns when we are dealing with the attributes of
the custom component.
It should be item, not Typekit.
Imagine the item, not the image.
And then price will be item the price.
I'm waiting, all right, I'm not ready.
So once we send the props like, for example, of the bassinet for items, it will look through four
times and then we'll get four checkout products with the dynamic data, so we'll check out the feature.
Is it OK or not to refresh it?
Farai, I've done everything OK.
There is no way it.
Using material like code.
So in the checkout, we are inducing any material uttered by linguists.
That.
One state official, I'll add these items to the basket when I go to my checkout bench, you can see
still I'm getting the same items like I'm getting.
Same item, but like I'm getting the number of items, but I'm getting the same item rather than getting
different items so we can see what happened there.
So basically, there is inside the checkout, yes, we are still using their custom like the hot potato.
So we have to first restructure the it.
So I'll be doing I like as I in fact check out this have sent that data through props and I'll have
to get hold of these props, so I'll be doing that in subsequent charges.
I should get an image.
Pretty.
So I'm saying this like I can use it instead of.
Sort.
I can send the image.
Instead of this, I can see in the title.
It will be Price.
I'm here like it would be the same process that we waited for the.
A product digesting photocopy that instead turned on just have basically created an added.
So we can use that.
Oh, no, need newspapers over here.
So, yeah.
So as you can see.
I refreshed the page and then asked of us, add items to my back that this one, I'll add this renders
and then now let us see whether the products that have been so yeah.
As you can see, we have begun to see the products that we added to that car.
I refreshed and again added a few products.
This this this this, this.
There are three of them and then one and two.
Yeah, that's four.
So now we have updated that part and also did add to cart functionality.
So now we want to update the prize over here and also remove some card functionality so we can see how
to implement that thing.
So, yeah, so first, we have to work to stop certain drugs.
The basic step is to import you start valuing this up separately on this.
I import the.
You state value.
Now, how to get that total basket total.
So I have said that I will implement the old application level coding and reduce the dodges.
So then the self-test section.
So when you get that total basket already, we will get that total amount that the basket contains.
So how to do that?
So we are basically export.
Gift basket total will be the object name, no concern, no.
So actually, it's going to be have the to go through the basket.
So what we have here today.
We have to return the basket.
Total amount of prize elephant in the basket, the combination of all the products.
So this is the way to do that.
So what this plane of code does is that this reduced function and have two arguments, one is that is
the accumulator and then the current the current item, so the accumulator keeps on increasing.
So as you can see, item that price plus amount.
So we had incrementing that I want every time with item price and this will work as a second parameter.
So here like the portion maximal for any error handling like that.
So this is how we'll get the total basket.
So instead, this operator largesse will also be in particular, get total basket.
But I'll import.
Get.
Basketball.
From producer.
So once we get that like now, we can initiate the.
We're going to get the whole of the basket that is in order to let.
And the dispatch function.
Yeah.
So I like that.
OK.
We are we are using this instead of the written function we have to use instead to function so that
we can consolidate it.
So you're instead of value we want in terms of, you know, we want the total basket value, right?
So.
Getting basket.
And then will be sending the Boston.
So as you can see, over here it is.
It needs our first argument of basket will be sending that.
And also, the number of items like instead of zero items, we want the like the total value, right,
so.
He will be using instead of zero.
But Scotland.
And then they're going to be using the value.
Value that is present in the props.
So with this, we can see the changes.
There's another one in.
So.
So I'll be hearing this one part of this thing and this and then TV, as you can open now, you can
see like we are seeing four items and then the price already.
If we go back and then add some more items like you can see the prize getting updated.
So like this, we have completed the add to basket and also all the amount and then getting the number
of items get update dynamically.
So now in the next year to see how to implement the removal and basket functionality.
So once we click on, remove some items over here, here and here, it should get updated.
And also the in the data, the product should get deleted.
I mean, see that in the next.