We added the logic to
fetch the "cartItems" data.
Now we want to display those items
in the page.
And to do that we can use a standard HTML table.
We're going to do this in two steps.
First I would like you to
simply display the cart data as it is.
So have a table row for each item,
with three columns for the product title,
price, and quantity.
Don't worry about formatting the price
as a currency for now.
As I mentioned, you can use
a standard HTML table for this,
along with some Tailwind utility classes
for the styling,
for example you can use "text-right"
to align numeric cell contents.
Pause the video now and write the JSX elements
to display the cart items in a table.
Ok. Here's how I would do it.
For convenience I have created
a separate React component called "CartTable",
and I'm only displaying it if "cartItems" is set.
Because we cannot display the items
if they haven't been loaded yet.
Now, I wrote the CartTable component
inside this same file,
but it could be moved to its own separate module.
Anyway, this component expects
the "cartItems" in the props, and returns a table.
There's a header row,
showing the column headings,
and I'm using Tailwind CSS classes
to add some padding to each cell.
Then there's the table body,
and here I'm iterating over each element
in the "cartItems" array,
displaying a table row for each item,
with separate cells for the "product.title",
"product.price" and "quantity".
I'm using the "text-right" utility class
for the cells that display numbers,
so they will be aligned to the right.
That's it. It's a fairly simple table.
If you did it in a different way,
that's still fine
as long as you're displaying
a table that looks like this.
Now, let's move to step 2.
We want to add a column
showing the total for each row.
We can easily calculate the total
by multiplying the price by the quantity.
And then we also want a grand total at the end,
as an additional row.
So this will the sum of the totals for each item.
The last improvement we want to make
is to format each price as a dollar amount,
so display a dollar sign before the number,
and always show two decimal places.
That's part two of this challenge.
In terms of code, you'll obviously need
to modify the table you created in the first step.
But you also need to transform the "cartItems" data
to calculate the totals.
At the moment the "cartItems" array looks like this.
What we want to do is add a "total" for each item,
in this case the price is 7.5
multiplied by 3 (that's the quantity)
meaning it should be 22.5.
Let's do the same for the other cart item.
Here the total is 15, because the quantity is 1.
But after this we also want to add a grand total
for the entire cart.
So instead of an array we could
transform this into an object
where the "items" array is just one of the properties.
This way we can add another property
that's the "total" for the entire cart.
22.5 + 15
makes 37.5.
So I suggest writing a helper function
that takes the original "cartItems" array
and transforms it into this object
before you display it in the table.
Once you've implemented these changes,
your cart page should look like this.
It shows line totals, grand total,
and prices are formatted as dollar amounts.
It's that time again when you should stop the video
and make the code modifications.
All right. Here's a possible solution.
I'm calling a "buildCart" function
to transform the "cartItems" array
into a "cart" object, before I display it as a table.
And that "buildCart" function
is defined up here.
You can pause the video if you want to
examine it in detail,
but for each cart item
it calculates the "itemTotal",
adds it to the grand "total",
and builds a new array of items
that include their "itemTotal".
At the end it returns an object
that includes both the items and the grand "total".
Now, I also wrote another helper function here,
called "formatCurrency",
that simply converts numbers into dollar amounts.
Back to the table, after getting a "cart" object
by calling "buildCart",
it displays the "cart" data,
including a new column for the "Total" of each item.
Then in the body, instead of iterating
through the original "cartItems" array
I'm using the "items" property of the "cart" object
returned by "buildCart".
And for each item I'm showing
an additional table cell with the "cartItem.total",
but displayed using the "formatCurrency" function.
Finally, there's now a footer row in the table,
that displays the grand total,
again formatted with "formatCurrency".
I haven't modified anything
in the CartPage component itself.
Again, this is just one possible solution.
As long as you're displaying the right table,
your code is fine even if it's a bit different.