Material ui Loading Button Loads all button onClick in React js loop (using map)

Question

So, I was working on commerce.js API. But when I press add to cart, it takes a bit of time to update the cart items number (from API) so I thought I should add a loading button until the cart items load. I found LoadingButton from @mui/lab so I used it. but the problem is even though that button is inside the loop when pressing onClick all the other button also goes to the loading state. IDK am I missing something or is my coding false?. Please check below & help me. Thanks. :)
Here is the main problem.

Here is the app.js where you can see loading state & other API fetching

products component in app.js. you can see I passed down the products & loading props

products loop & props down to product component

finally the cart loading button in the product component with loading props. it works but all other buttons also loads at the same time.

Answer 1

What you can do is create a map in which you store the loading state for each cart. So cartLoading will have the following shape:

{
  "product-one-id": true,
  "product-two-id": false,
}

So change the state to const [cartLoading, setCartLoading] = useState({});

At handleAddToCart, change the two setCartLoading calls so that they update only one key of the state:

setCartLoading(oldState => ({...oldState, [productId]: true}));
...
setCartLoading(oldState => ({...oldState, [productId]: false}));

Then, at the <Grid> inside the Products component, change cartLoading={cartLoading} to cartLoading={cartLoading[product.id] || false}

This is just one way to do it though. You can also handle the state inside your Product component.

Answer 2

You use single one (let's say "global") variable for specifing loader state which doesn't allow you to check which one product fired cart loading.

/* ... */
const [cartLoading, setCartLoading] = useState(false);
/* ... */

First of all consider if you need information about updating cart somewhere else than in buttons. If not then the best option could be use useState inside <Product /> component for specific product instead of <App />.