OK, so let us now go ahead and create the cart item component for that, we need to create another
file with the name.
Of card item, Lord Jesus will create that, and I'm it.
Let us created.
There's the mistake of war card I don't use.
Inside, Scott Item, gorgeous.
So first of all.
We'll.
Get a boilerplate code with this snippet, search out f c e.
This canister leaked out of functional component.
That's right, that is odd AFC like react after React A4 for ATL for functional component would export
like E in the end like signifies that with export and if we just don't, if we don't provide an E,
we'll just get a function without an export.
So odd AFC e.
That is what it is.
So now, first of all, let me just import the global context, which we created in the context of the
gas file.
So we'll import like import and we'll provide a curly braces use global context and it auto importer
for us.
So that's the best part.
Like all, the importing is the best part.
It saves a lot of time, not a lot of time, but it's fun to use because there will be posting some
of the props inside this function and those props will be expected while getting it done.
So there would be an IED and it means and Dido and rice amount.
So these are the five things which we are going to pass as a prop inside this particular component.
So next.
We'll ride constant here.
Oh, did I need something?
Yeah.
I will write a constant here, and this will be an object basically, so that will be containing this
will increase.
Now I'll explain this in a minute that we just finished off that declaring Bartlett All-Girl amount.
And this will be equal to like this in Article two, but this will be getting from U.S.
Global context.
Removal here that will be used to remove a product from the garden next will have increased that will
be used to increase the number of like increase the quantity of the product.
Like that how many quantity, how much pieces we are wanting decreases to decrease that particular number
and the total amount is to be get the amount.
Next, we'll go to the written statement in the written statement.
We'll need an article tagged in order to.
An article, indeed.
And so that would be art, the golf course, northern golf, so I keep on forgetting this.
Article?
Dart and Dart will give the class name, so that will be carved.
If an item fired did not work.
Okay, it worked.
Article tagged with the class name of God item.
So next, we'll first of all, what we'll have is we'll have an image of the product, right?
But that will be an image tag that will have to write an image tag AMG.
And the source will be dynamic here.
It's not static, are not hard coding and we are getting it from somewhere.
And whether this somewhere, it's somewhere.
Not in this file, actually.
So IMG and let me are the artwork, so that will be title.
Cost that can be seen for like images, but I want things to be as clear as possible.
So after this image tag inside the article, we'll have a div and inside this day we'll be providing
other information such as title price and things like that.
OK.
So what we will do is will create a day here.
The do will create and eat food, and there will be a dynamic text inside the city hall and their dynamic
text would be the title of the product.
I.
And after that, we'll have and another pitch for that will be for the price.
That will also have a class name.
That last name would be Item Price.
And inside this will have the.
The amount basically of the product.
And before that, that will be followed by a rupee symbol that will be hard coded for like every amount
that would be a rupee that would be a rupee symbol before the integer value.
So that's what I've hardcoded that.
Okay, next we'll have a button to remove the like product from our bag of wish lists, but a button
off button.
So we'll have a button.
That will also have a class name.
And that last name will be the move.
Beatty and.
And of course, that will have on click function.
So we will leave it on click.
Being.
Bath and inland function do it.
So that will be.
Remove an I.D..
It specifies the I.D. of the product, like how it will know which product you want to lead.
So this idea will specify which particular product you want to delete from your cart or your wish list.
So inside this world, we can try to move on, you can even write, delete or never, you can even provide
a symbol here of miners or rights symbol or delete, like recycle bin icon, whatever, whatever like
that's totally up to you.
So after the button, we'll have another day, which will be containing the buttons to increase or decrease
the quantity of the product after the death will have on other device and that will have.
Basically, you're not giving it a costume, will provide some in line styling to it, like the inland
CSIS.
So.
And give style here to provide some inland styling and that will be display.
And I think that sort.
Next, we will be having two buttons, one to increase in, one to decrease.
First will read the decrees part.
It could ease among.
And will come in this particular line so that we know that the below board is to decrease the amount
or decrease the amount, and this will need a button like whenever we click that button.
The amount like the quantity should be decreased by one.
So let's say a button.
And this button will have a class name, of course, to get us yeses, and that will be among.
But.
And this will have an on click like whenever we click this button.
What should be the function?
So on, click.
I did a mistake.
On Click.
And this will expect function, so will give it an inline factory function.
And will you give double amount?
OK, now what does this double amount, this toggle amount will change the value of the subtotal, which
is presented below.
Like, if we increase one quantity score, that will also increase the increase the amount.
OK.
And if we decrease, that will decrease the amount.
This is what the total amount will do, basically.
So the total amount will expect some arguments.
So we'll give it an idea and this.
Next here.
As an argument and next, will, right?
Inside this button, I am going to repeat that, oh, not being a Peter B dog, OK, it's not taking
Bill Typekit.
OK.
And then inside the bag, I'm giving some in line, see a sister.
I'll.
Basically, just changing the font size and the font size, font size will be many pixels.
And.
This is to decrease demand, so I'm giving the value like I'm giving the symbol of a hyphen or a minus
while subtraction sign because we want to decrease the.
I will do the same to.
Increase the amount, and we'll copy this part here, and we'll make the changes accordingly, we're
not leaving it as it is.
So.
And we'll try.
Increase amount and work done among Burton would be seen for increase.
Also on Click.
It will be a same and insert instead of this field right in, and that increases the amount, OK?
And inside this minus sign will provide a plus sign.
So that's all.
That's all basic functionality.
Of course, this will not work as of now because we have not controlled the function or something like
that.
And.
So let's spin up our server, know before spinning up the server, let us first imposed this inside
the Scott containers.
So.
And we'll have to map through all the data, like each data, will have a component of its own guard
component of its own inside this Dave.
What we'll do is we'll put out some JavaScript, so we'll provide calibrated.
So we let guard dart map and it will expect a function.
And we are providing an argument of item here.
And then we'll provide the written statement to this mapping function will return in the cart item.
Basically, I have not imported it right now, so that's why it's not giving me an option to auto import.
Bart will import it.
Maybe it gave me an option to import, export, import or not.
Now every key, like every component of your mapping.
So that needs the key.
That would be item totality will be the key.
And now we're using the spread operators.
Now, if you don't put an operator, it basically provides an array or an object and like one by one,
like whatever is present, the content will be rendered here and the name itself justifies.
Okay, so now let me see if.
And let me spin up the server.
And premiums start.
So Osama is running on the spot part.
I realized one thing, nor does one thing that we have not yet imported are container in the AM gorgeous
file, so it will not show up.
So what we need to do is we need to import it in order for us to show it.
OK, so let me go to the audience and let me import the guard container.
That will be the.
Container and it auto imported from below the nearby are import like I include this.
Right.
And they not they'll sell closer, and one more thing, I have to go to the next door and just file
and write some more things.
So first of all, let me just import.
The global context and what will it do is that we have to import the app provider from the context,
and I have to wrap it like some important app.
I know.
One text.
And.
Basically, this will be in the column, this is because there are multiple exports that and we'll wrap
our app in in this.
Providers.
Provide a.
We'll put our app and to this news cut and pasted inside this.
Oh, I did, I missed a.
Now, let us go to the browser and see.
And that is an era.
No, there's no way it's OK.
So are images are not showing up for some reason.
But that's OK.
We'll figure it out.
But this is the basic structure of our project and it looks pretty good.
And we have not provided any value here.
OK.
Okay.
No need to get.
No need to go another.
OK, so this is what how it will look.
Of course, we have not given any functionality so far, but we'll be doing that part in the next review.