Lifting State with Arrays in React Shopping Cart
About
Welcome to Reactville, a constantly evolving virtual metropolis. Let’s build this digital town together, one component at a time.
The local supermarket is implementing a new online ordering system and needs help building the user interface for a virtual shopping cart. Shoppers will be able to visually move items back and forth between the store shelves and their shopping carts.
In this module, students will explore advanced React techniques for managing more complex data structures like arrays in state. They’ll gain practical experience by building a shopping cart application that responds to user actions. The key feature of this module is using event-driven programming to transfer items between two state arrays — representing the shop’s inventory and the user’s cart.
By the end of this module, students will have created a functional, interactive shopping cart using a reusable inventory component that visually represents both the store’s and the user’s inventory.
Content
| Lesson | Skills |
|---|---|
| Setup | Setting up the development environment. |
| Component Hierarchy and Layout | Planning out a component hierarchy for a React App. |
Building the Shop Component |
Creating a React component and mapping over data. |
| Passing Props | Passing props from a parent component to a child component. |
Adding State to the Shop Component |
Putting data into state. |
| Handling Click Events | Impacting state with click event handlers. |
Reusing the InventoryList Component |
Working with reusable components in React. |
| Updating Arrays in State | Moving objects between two arrays held in state. |
| UI Improvements | Reflecting an empty array in the UI. |
References
Internal
Prerequisites
- Intro to React
- React Components
- React State Management
- Lifting State in React
Solution code
Course landing pages
Resources
Find a 👾 bug 👾 or have suggestions? Let us know!