Full-Stack React Projects - Second Edition

The cart view

The cart view will contain the cart items and checkout details. But initially, only the cart details will be displayed until the user is ready to check out. The code to render this cart view will be added as follows.

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

<Grid container spacing={24}>      <Grid item xs={6} sm={6}>            <CartItems checkout={checkout}                  setCheckout={showCheckout}/>      </Grid> {checkout &&       <Grid item xs={6} sm={6}>        <Checkout/>      </Grid>}</Grid>

The CartItems component, which displays the items in the cart, is passed a checkout Boolean value and a state update method for this checkout value so that the Checkout component and its options can be rendered conditionally based on user interaction.

The showCheckout method to update the ...