Cart icon on the menu

In the menu, we will add a link to the Cart view, and also add a badge that displays the length of the cart array stored in localStorage, in order to visually inform the user of how many items are currently in their cart:

The link for the cart will be similar to the other links in the Menu, with the exception of the Material-UI Badge component that displays the cart length.

mern-marketplace/client/core/Menu.js:

<Link to="/cart">    <Button color={isActive(history, "/cart")}>       Cart       <Badge color="accent" badgeContent={cart.itemTotal()} >           <CartIcon />       </Badge>    </Button></Link>

The cart length is returned by the itemTotal helper ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.