Core Redux API Codecademy Store project - quantity input not working

I’ve followed all 15 steps in the Redux API Codecademy Store project, and watched the video walkthrough, however the final project specification (to be able to modify the quantity input from the dropdown) is not working. (Though the quantity does increase if you click “add to cart” button multiple times).

@siba1983 has posted they have this issue too, however there hasn’t been a response to them.

Thanks for any help you can provide. I’m new to Redux, and this is my first project using it.

Here is my gist for all the code.

The most relevant files for this bit of the project are:

Cart.js

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.
    dipatch(changeInputQuantity(name, newQuantity));

  };

  // Use the cart and currencyFilter slices to render their data.
  const cartElements = Object.keys(cart).map(createCartItem);

  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>
    );
  }
};

cartSlice.js

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 updatedItem = {
      ...itemToUpdate,  
      quantity: newQuantity
      }
      // Return a copy of the cart with the updatedItem included.
      return {
        ...cart, 
        [name]: updatedItem
    };
  }
    default: {
      return cart;
    }
  }
};

I haven’t followed Redux, so I can’t help on the details. However, just out curiosity reviewing your code:

// Dispatch an action to change the quantity of the given name and quantity.
dipatch(changeInputQuantity(name, newQuantity));

Does it change anything correcting the typo on dispatch function?

Thanks for picking that up! I have fixed it, however unfortunately it has not resolved the issue.

This is an exercise done in the codecademy UI, so my next troubleshooting step will be to recreate the code on my own local environment, which has access to better debugging tools.

Looks like you have the wrong name for the action creator that you are passing it to dispatch:

    // Dispatch an action to change the quantity of the given name and quantity.
    dipatch(changeInputQuantity(name, newQuantity));

It is called changeItemQuantity and that is what you import from the cartSlice so see if it helps to fix that.

Lol. I just worked that out the harder way (created a local install so I could get the better error messages, came here to update the fix, but you beat me to it! ), when all it needed was better proofreading! Thanks so much for your keen eyes spotting this. I think it’s time I visited an optometrist!

1 Like

Seems I had two typo errors here - the dipatch (dispatch), and changeInputQuantity (should have been changeItemQuantity). :sweat_smile:

1 Like

I have the same error but I’ve checked multiple times and there’s no typos. Whenever I use the number select in the cart, the result that I get for the price is NaN (for all numbers)

I can confirme it, i’ve the same issue as described, and i’ve doubled checked for typos several times just in case x)
Guess i’ll try to run it outside CA’s UI.

1 Like

Im having the same issue. Did you guys could figure it out?

1 Like

Hi there everyone.
I just had the same error happen to me.
Every time I changed the quantity in the dropbox I got a NaN value, it was a simple mistake in the very first step, instead of newQuantity I simply had quantity, that was the mistake.

// Create your changeItemQuantity action creator here.
export const changeItemQuantity = (name, newQuantity) => {
return {
type: “cart/changeItemQuantity”,
payload: {
name: name,
//quantity: newQuantity, this was my mistake it should be …
newQuantity: newQuantity,

I’m having the same issue with zero typos…

Can you share your most recent code for all the files of the project?

You can share them via gist (or link to github) as done in the original post of the thread.

Or, you can copy/paste the code into the forums, but if you decide to copy/paste, then be sure to read [How to] Format code in posts so that the formatting of your code is preserved in forum posts.

1 Like

I noticed a type in the already given code. I’m not sure if my cursor was there and I accidentally deleted a letter but once I changed
export const changeItemQuantiy = (name, newQuantity) => {
return {
type: ‘cart/changeItemQuantity’,
payload: {name:name, newQuantity:newQuantity}
}

to changeItemQuantity

my code worked