I have a shopping cart component that I’ve passed a useState prop to update the number of items within the shopping cart / the amount of money that the cart is worth:
import { data } from "./data";
export default function StoreItems({ addToCart, Total, setTotal }) {
const addToTotal = (data) => {
addToCart();
setTotal(Total + data.price);
};
return (
<Grid container spacing={3}>
{data.map((data) => (
<Grid item key={data.id} xs={12} sm={6} md={3}>
<Card>
<CardMedia
image={data.image}
/>
<CardActions>
<div>
<Button>Buy</Button>
<Button
size="small"
sx={{ marginLeft: "5px" }}
onClick={addToTotal}
>
Add to Cart
</Button>
</div>
</CardActions>
</Card>
</Grid>
))}
</Grid>
);
}
The Data is a JavaScript object that looks like:
export const data = [
{
id: 1,
title: "item 1",
content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac aliquam nunc.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.`,
image: "https://source.unsplash.com/random/1",
price: 5000,
},
];
And the props are passed down from:
function Store() {
const [cartCount, setCartCount] = useState(0);
const [Total, setTotal] = useState(0);
const addToCart = () => {
setCartCount(cartCount + 1);
};
return (
<>
<div>
<StoreItems
Total={Total}
setTotal={setTotal}
addToCart={addToCart}
/>
</div>
</>
);
}
export default Store;
Why is it that I am unable to add the price of data.price to the useState – Total object