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.
>Solution :
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.