I have completed the Codecademy Store Project in the Redux section of the Front-End Engineer path. I am having an issue with the input field where you select a quantity once an item has been placed in the cart. I can click on the input field and see all the selections from 1 - 99 but when i try to click them it doesn’t seem to change, I can however keep clicking add to cart on an item and i can increase it that way. The issue is the input field. I have looked on forums and other people seem to be having the same issue, I have checked for typos and I have even found the solution code and referenced it to that but it still isn’t solving my issue. Please can somebody help.
I will leave this link to the project if that will help:
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-redux/modules/wdcp-22-core-redux-api/projects/codecademy-store
export const addItem = (itemToAdd) => {
return {
type: 'cart/addItem',
payload: itemToAdd,
};
};
// Create your changeItemQuantity action creator here.
export const changeItemQuantity = ( name, newQuantity ) => {
return {
type: 'cart/changeItemQuantity',
payload: { name, newQuantity }
};
};
const initialCart = {};
export const cartReducer = (cart = initialCart, action) => {
switch (action.type) {
case 'cart/addItem': {
const { name, price } = action.payload;
// if the item already exists, increase the quantity by 1, otherwise set it to 1
const quantity = cart[name] ? cart[name].quantity + 1 : 1;
const newItem = { price, quantity };
// Add the new item to the cart (or replace it if it existed already)
return {
...cart,
[name]: newItem
};
}
case 'cart/changeItemQuantity': {
const { name, newQuantity } = action.payload;
const itemToUpdate = cart[name];
// Create a copy of itemToUpdate and update the quantity prop.
const updateItem = {
...itemToUpdate,
quantity: newQuantity
}
// Return a copy of the cart with the updatedItem included.
return {
...cart,
[name]: updatedItem
};
}
default: {
return cart;
}
}
};
import React from 'react';
import {
calculateTotal,
getCurrencySymbol,
} from '../../utilities/utilities.js';
// Import the changeItemQuantity() action creator.
import { changeItemQuantity } from "./cartSlice.js";
export const Cart = (props) => {
const { cart, currencyFilter, dispatch } = props;
const onInputChangeHandler = (name, input) => {
// If the user enters a bad value...
if (input === '') {
return;
}
// Otherwise, convert the input into a number and pass it along as the newQuantity.
const newQuantity = Number(input);
// Dispatch an action to change the quantity of the given name and quantity.
dispatch(changeItemQuantity( name, newQuantity ));
};
// Use the cart and currencyFilter slices to render their data.
const cartElements = [];
for (let item in cart) {
cartElements.push(createCartItem(item))
};
const total = calculateTotal(cart, currencyFilter);
return (
<div id="cart-container">
<ul id="cart-items">{cartElements}</ul>
<h3 className="total">
Total{' '}
<span className="total-value">
{getCurrencySymbol(currencyFilter)}{total} {currencyFilter}
</span>
</h3>
</div>
);
function createCartItem(name) {
const item = cart[name];
if (item.quantity === 0) {
return;
}
return (
<li key={name}>
<p>{name}</p>
<select
className="item-quantity"
value={item.quantity}
onChange={(e) => {
onInputChangeHandler(name, e.target.value);
}}
>
{[...Array(100).keys()].map((_, index) => (
<option key={index} value={index}>
{index}
</option>
))}
</select>
</li>
);
}
};