Week 13 - Wednesday, July 14th
Class Video
JavaScript Practice Problems
Biggest Number: write a function that returns the biggest of the two numbers passed in.
Return New Array With Same Elements: write a function that creates a new array containing the same elements as in the passed in array.
Numbers In Range: write a function that returns an array containing the subset of numbers in the input array that are between the min and max values.
Users In Range: write a function that returns an array containing the subset of users in the input array that have an age between the min and max values.
User Ages In Range: same as the previous problem, except this time only return an array of the ages that are in the range.
React - Updating State, Communicating with Child Components
We're going to simulate an e-commerce site that has some products that you can add and remove from your cart prior to checkout.
There's a handy public API that you can use to retrieve some sample product data. We'll use that to fill out our products.
There are three components:
Store (container): the container component (smart component) that holds the state
products: an array of products to display
cartItems: an array of objects in the shopping cart. Each item contains a reference to the product, as well as the quantity of the product.
ProductList (bottom): a child component (presentation component) that displays the list of components on the left side. Allows user to add items to the cart.
ShoppingCart (top): a child component (presentation component) that display info about the list of components in the shopping cart and a total. Allows the user to add and remove items from the cart.
Loading the product data
The first task for the Store component is to retrieve the list of products.
The data returned looks like this. An array of product objects.
Since this data will be incorporated into the component's UI, we'll need to have React manage it. So we create a state variable to hold it.
We'll register the function to retrieve the product data using the React useEffect hook so that React can schedule it to happen at the correct time. We specify an empty trigger array so that the product list is only retrieve after the first render of the component.
ProductList component
We'll created a simple component to render the list of products and one to render a specific product. We pass the list of products to the ProductList component, and then the ProductList component passes the individual product to the Product component.
In each case, we are using destructuring to extract the property from the props object passed into the component function.
Now, we can display the list of products...
Adding Items to the Cart
The Store component is responsible for maintaining the list of products, as well as the products that are currently in the shopping cart and how many of each there are.
We need to create a state variable to hold the items that are in the cart.
And we need to two functions: addItemToCart and removeItemFromCart. For each, it will accept a product data object.
There are two scenarios we have to handle
This is the first item in the cart, in which case we need to create a new cart item and add it to the list of cart items.
The items is already in the cart and we just need to find the item and increase the quantity.
In both cases, we need to generate a new array, using map, or the spread operator, to trigger a re-render.
A cart Item is going to be an object, that has two properties: a reference to the product item that is being added to the cart, and the quantity, which will start out as 1 when they add it to the cart.
Removing items from the Cart
Again, there are two scenarios
If the quantity is 1, then we need to remove it from the cart
Otherwise, we just need to decrement the quantity
In both cases, we need to generate a new array, using map or filter, to trigger a re-render
Passing the functions to the components
The Store component needs to pass the addItemToCart function to the ProductList component and the ProductList component will pass it on to the Product component.
We'll add a button to the Product component that will call the function to add the item to the cart when the button is clicked.
Logging the Change
If we put a console.log(cartItems) in the addToCart function, and watch the console log, we can see that the cartItems array is not immediately updated after the call to updateCartItems. This is because React does not immediately update the state. It waits until the appropriate time in the life cycle of the component to update the state.
Adding the ShoppingCart component
Finally, we'll add the ShoppingCart component to display the items in the cart, and also allow the user to add or remove items from the cart.
Code Challenges
#1 - log the numbers between between 1 and 10 to the console.
#2 - log the numbers less than 100 that are even to the console.
#3 - log the multiplication table through 10 for the number 7.
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
etc..
7 * 10 = 70
#4 - log the multiplication table through 10 for the numbers 1-10.
#5 - log the sum of the numbers 1-10.
#6 - create a function that accepts two arrays and returns a new array that contains all the elements in both arrays.
Solutions
#1 - log the numbers between between 1 and 10 to the console.
#2 - log the odd numbers less than 100 to the console.
#3 - log the multiplication table through 10 for the number 7.
#4 - log the multiplication table through 10 for the numbers 1-10.
#5 - log the sum of the numbers 1-10.
#6 - create a function that accepts two arrays and returns a new array that contains all the elements in both arrays.
Last updated