Welcome to Proper Plants, a thriving local nursery that offers a wide selection of plants for your landscaping needs! In this workshop, you'll create a landing page for this fictional store that showcases a grid of available plants. Users will be able to add plants to their cart as well as change the quantity of something already in their cart, or remove an item from the cart altogether.
A live demo of the finished project is available for you to reference.
You'll be building this project from scratch! You are highly encouraged to reference previous solutions. Your submission should meet the following requirements.
- Each component is defined in its own file. In the future, this won't always be necessary, but the intention here is to get practice with importing and exporting components.
- Folders are used to organize related components and files.
- The cart is managed as a state variable in
<App>. - Functions to add items to or remove items from the cart are defined in
<App>. These functions should update the cart in state. - The cart array in state is updated by using array methods such as
mapandfilterto avoid direct array mutation.
Warning
In React, arrays should be treated as immutable when you store them in state. When you want to update an array stored in state, you need to either make a copy of an existing one or create a new array. See this documentation on updating arrays in state for more details on how to do so.
A hard-coded array of plants has already been provided for you in src/data.js.
- Users can see the image and name of every plant in that array of plants.
- The image is just an emoji character!
- Each plant has an "Add to cart" button.
- If the plant is already in the cart, the button will increase its quantity by 1.
- If the plant is not in the cart, the button will add it to the cart with a quantity of 1.
- This code is organized into at least two separate components.
- The cart renders a cart item for each plant the user has added.
- Each cart item shows the image and name of the plant.
- Each cart item shows the quantity of the plant.
- Each cart item has two buttons. One button decrements the quantity, and the other increments it.
- If the quantity of a cart item is ever 0 or below, that item is removed from the cart.
- This code is organized into at least two separate components.
Please submit the link to your public GitHub repository.