Full-Stack React Projects - Second Edition

Adding to the cart

While browsing the products in the marketplace, users will see the option on each product to add it to their cart. This option will be implemented with a React component named AddToCart. This AddToCart component in client/Cart/AddToCart.js takes a product object and a CSS style object as props from the parent component it is added to. For example, in the MERN Marketplace, it is added to a Product view as follows:

<AddToCart cartStyle={classes.addCart} item={product}/>

The AddToCart component, when rendered, displays a cart icon button depending on whether the passed item is in stock or not, as shown in the following screenshot:

For example, if the item quantity is more than 0, AddCartIcon is displayed; otherwise, DisabledCartIcon ...