Project details

It’s a basic food ordering website created as a demo project for my portfolio. I made this with the help of a YouTube video. The video is quite old, so I’m encountering several problems, and this is one of them. I’m seeking help from you all…

When the “add to cart” button is clicked, it should store the data in the “data” variable using the “dispatch” function. However, this isn’t happening. I have printed each value individually and confirmed that all values are being saved correctly, but they are not being stored in the “data” variable through the “dispatch” function. Please help…

This is my first time asking a question here. If you don’t understand something, please comment, and here is the source code link: https://replit.com/@LordJayanta/GoFood#

See code online in replit:

• Home.jsx : https://replit.com/@LordJayanta/GoFood#src/screens/Home.jsx
• Card.jsx : https://replit.com/@LordJayanta/GoFood#src/components/Card.jsx
• ContextReducer.jsx : https://replit.com/@LordJayanta/GoFood#src/components/ContextReducer.jsx

code : cart.jsx (see code online)

• a part jsx

let dispatch = useDispatchCart()
let data = useCart()

const handelAddToCart = async () => {
await dispatch({
    type: "ADD",
    id: props.foodItem._id,
    name: props.foodItem.name,
    price: finalPrice,
    qty: qty,
    size: size
})
console.log(data);

console.log(props.foodItem._id);
console.log(props.foodItem.name);
console.log(finalPrice);
console.log(qty);
console.log(size);
}

useEffect(() => {
setSize(priceRef.current.value)
}, [])
let finalPrice = parseInt(qty) * parseInt(option[size]);

• a part jsx html

<div className="w-100">
<select name="" className='m-2 h-100 w-20 bg-success rounded' onChange={(e) => { setQty(e.target.value) }}>
    {Array.from(Array(6), (item, index) => {
    return (
        <option key={index + 1} value={index + 1}>{index + 1}</option>
    )
    })}
</select>
<select name="" className='m-2 h-100 bg-success rounded' ref={priceRef} onChange={(e) => { setSize(e.target.value) }}>
    {priceOptions.map(data => <option key={data} value={data}>{data}</option>)}
</select>
<div className="d-inline h-100 fs-5">
    ₹{finalPrice}/-
</div>
<hr />
<button className="btn btn-success text-white justify-center mx-auto w-100" onClick={handelAddToCart} >Add to Cart</button>
</div>

web console:

(3) [{…}, {…}, {…}]
    0: {id: undefined, name: 'Chilli Paneer', price: undefined, qty: 1, size: 'half'}
    1: {id: undefined, name: 'Chilli Paneer', price: undefined, qty: 1, size: 'half'}
    2: {id: undefined, name: 'Chilli Paneer', price: undefined, qty: '6', size: 'full'}
    length: 3[[Prototype]]: Array(0)

663eded94426a4a87f27480e
Chilli Paneer
1200
6
full

what i want ?

I want that when someone clicks the “add to cart” button, all the cart data should be stored in the “data” variable using the “dispatch” function.