Full-Stack React Projects - Second Edition

Cart icon in the menu

In the menu, we will add a link to the cart view, as well as 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 rendered link and badge will look as follows:

The link for the cart will be similar to the other links in the menu, with the exception of the Material-UI Badge component, which displays the cart length. It will be added as follows:

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

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