How do I pass mapped props to a component using useState?

Question

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 array with objects in it 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

Answer 1

There's a problem with how you use addToTotal in the StoreItems component. First, the function expects an item of the data array to be passed, but you don't do that explicitly. In your implementation the function gets a click event instead of a data array item. Second, it's better to rename the first argument in map's arrow function because it confuses the data array with its items. Here's how you need to update the component to make things work:

import { data } from "./data";

export default function StoreItems({ addToCart, Total, setTotal }) {
  const addToTotal = (item) => {
    addToCart();
    setTotal(Total + item.price);
  };
  return (
          <Grid container spacing={3}>
            {data.map((item) => (
              <Grid item key={item.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(item)}
                      >
                        Add to Cart
                      </Button>
                    </div>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>
  );
}

Here's a simplified playground with the fix: https://stackblitz.com/edit/stackoverflow-71871965?file=src%2FStoreItems.js