CODEWITHSUNDEEP
reactjsreact-context
Uttam
Uttam

Reputation: 776

Getting typeError while adding item to cart

These lines of codes are from MealItem.js

import MealItemForm from "./MealItemForm";
import classes from "./MealItem.module.css";
import { useContext } from "react";
import CartContext from "../../../store/cart-context";

const MealItem = props => {

    const cartCtx = useContext(CartContext);
    
    const price = `INR ${props.price.toFixed(2)}`;
    
    const addToCartHandler = amount => {
        cartCtx.addItem({
            id: props.id,
            name: props.name,
            amount: amount,
            price: props.price
        });
    };
    return <li className={classes.meal}>
                <div>
                    <h3>{props.name}</h3>
                    <div className={classes.description}>{props.description}</div>
                    <div className={classes.price}>{price}</div>
                    </div>
                <div>
                    <MealItemForm onAddToCart={addToCartHandler} />
                </div>
            </li>
};

export default MealItem;

and these codes are from cart-context.jsx

import React from "react";

const CartContext = React.createContext({
    items: [],
    totalAmount: 0,
    addItem: (item) => {},
    removeItem: (id) => {}
});

export default CartContext;

As you can see I have a function inside the const CartContext named addItem but when I try to access this, this gives an error enter image description here

Upvotes: 0

Views: 65

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

My guess is that you didn't render the Context Provider, refer to useContext API docs examples.

<CartContext.Provider value={yourContextValues}>
  <MealItem/>
</CartContext.Provider>

Update: You have a typo in addItem

const cartContext = {
  ...
  // Should be addItem
  adddItem: addItemToCartHandler,
}

Upvotes: 1

Related Questions