The CartItems component will allow the user to view and update the items currently in their cart. It will also give them the option to start the checkout process if they are signed in, as shown in the following screenshot:

If the cart contains items, the CartItems component iterates over the items and renders the products in the cart. If no items have been added, the cart view just displays a message stating that the cart is empty. The code for this implementation is as follows.

mern-marketplace/client/cart/CartItems.js:

{cartItems.length > 0 ? <span>
      {cartItems.map((item, i) => {
          ...          
            … Display product details
              … Edit quantity
              … Remove product option
          ...
        })
      }
     … Show total price and Checkout options … 
    </span> : 
    <Typography variant="subtitle1" component="h3" color="primary">
        No items added to your cart.    
    </Typography>
}

For each product item, we show the details of the product and an editable quantity text field, along with a remove item option. Finally, we show the total price of the items in the cart and the option to start the checkout operation. In the following sections, we will look into the implementations of these cart item display and modification options.