Cannot read properties of undefined (reading 'meat')

Question

I made a burger program and my goal is to add and remove burger ingredients with two buttons But after adding an ingredient, if the button is clicked again, I get the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'meat') at Object.addIngredientsHandler [as addIngredients]

import { useState } from "react";
import Burger from "./Burger/Burger";
import BurgerControls from "./BurgerControls/BurgerControls";
import BootstrapNavbar from "../ReactBootsrap/BootstrapNavbar";
export default function BurgerBuilder() {
  const [state, setState] = useState({
    ingredients: {
      meat: 1,
      salad: 1,
      cheese: 1,
      bacon: 1,
    },
    totalPrice: 0,
    INGREDIENT_PRICES: {
      salad: 0.25,
      cheese: 0.5,
      meat: 5,
      bacon: 1,
    },
  });
  const addIngredientsHandler = (type) => {
    const oldCount = state.ingredients[type];
    const updatedCount = oldCount + 1;
    const updatedIngredients = {
      ...state.ingredients,
    };
    updatedIngredients[type] = updatedCount;
    const showPrice = state.INGREDIENT_PRICES[type];
    const oldPrice = state.totalPrice;
    const newPrice = oldPrice + showPrice;
    setState({ ingredients: updatedIngredients, totalPrice: newPrice });
  };

  const removeIngredientsHandler = (type) => {
    const oldCount = state.ingredients[type];

    const updatedCount = oldCount - 1;
    const updatedIngredients = {
      ...state.ingredients,
    };
    updatedIngredients[type] = updatedCount;
    const showPrice = state.INGREDIENT_PRICES[type];
    const oldPrice = state.totalPrice;
    const newPrice = oldPrice - showPrice;
    setState({ ingredients: updatedIngredients, totalPrice: newPrice });
  };

  return (
    <>
      <BootstrapNavbar />
      <Burger ingredients={state.ingredients} />
      <BurgerControls
        addIngredients={addIngredientsHandler}
        removeIngredients={removeIngredientsHandler}
        totalprice={state.totalPrice}
      />
    </>
  );
}

import React from "react";
import styles from "./BurgerControls.module.css";
import BurgerControl from "./BurgerControl/BurgerControl";

const controls = [
  { label: "Meat", type: "meat" },
  { label: "Salad", type: "salad" },
  { label: "Bacon", type: "bacon" },
  { label: "Cheese", type: "cheese" },
];

const BurgerControls = (props) => (
  <div className={styles.BuildControls}>
    <p>
      {" "}
      <strong>purchasable:</strong>
    </p>
    <p>{props.totalprice.toFixed(2)}$</p>
    {controls.map((ctrl) => (
      <BurgerControl
        key={ctrl.label}
        label={ctrl.label}
        add={() => props.addIngredients(ctrl.type)}
        remove={() => props.removeIngredients(ctrl.type)}
      />
    ))}
    <button className={styles.OrderButton}>Order</button>
  </div>
);

export default BurgerControls;

project

github repository

Answer 1

The error is pointing here:

const showPrice = state.INGREDIENT_PRICES[type];

Which implies that type is 'meat' and state.INGREDIENT_PRICES is undefined. While it's defined in the initial state value, it'll be abandoned any time you update state like this:

setState({ ingredients: updatedIngredients, totalPrice: newPrice })

Partial state updates are an artifact of older React versions and class-based components. The useState hook doesn't do that. Instead, to preserve the properties you aren't modifying, you need to include them in the state update as well:

setState({
  ...state,
  ingredients: updatedIngredients,
  totalPrice: newPrice
})