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.

And sharing a working example of your code would be very helpful @Tauhid — Kundan, Jan 31 '22 at 11:41
Please edit the question to have the code instead of images. It would be so much easier to work it around. @Tauhid — Shayan Faghani, Jan 31 '22 at 11:44
Well, I thought MUI loading prop does that. because it checks true or false. I should not have to add logic I guess. — Tauhid, Jan 31 '22 at 11:44

score 1 · Accepted Answer · answered Jan 31 '22 at 11:46

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.

score 1 · Answer 2 · answered Jan 31 '22 at 11:53

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 />.

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

2 Answers2