ReactJs Disabling the dynamicaly rendered button

#1

I have a list of items in an array i looped through that array and dynamicaly show the items list with add and remove button.
add and remove button add or remove the items to the users newly list same as add to cart and remove from the cart.
now what i want that if the user added the item once in cart or list then the button get disabled so it wont add the same item again and again in his list or cart.
is there any way i can achieve this?

{list.map((shoe) => ( 
<div key={shoe.id}>

  <h5>{shoe.name}</h5>

  <button onClick={() => addItem(shoe)}>add</button>

  <button onClick={() => removeItem(shoe.id)}>remove</button>

</div>
#2

Can you show us your code please? It would be easier for us to help you this way

#4

It seems like you are trying to return something from your onClick property, I don’t think you can do that.

Have you tried something like onClick={this.addItem(shoe)} ?

#6

I edited the question again kindly check it so you may be able to help me.

#7

If I understand the question correctly, correct me if not.

Do you have access to the cart state inside the product list component?

If so you can check for the product id in the map and conditionally render (or disable) the buttons depending on if the cart has the product added or not.

1 Like
#8

yes i have access. how can i do that?

#9

That is a very open-ended question considering we don’t have much information to go on.

How are you accessing the state? Do you have some state management, are you using context, how does the product component have access to the cart state?

In any case, you would check the cart state for the product ids and use that knowledge in the product map to render or not render the buttons.

But there might be a simpler solution using the product component local state and the addItem function. It might programmatically disable the button that was clicked (maybe using a ref?) or it can get passed the product id of the product that was clicked and then that information can be used in the map somehow.

Without some specific context, I can’t really give you anything super concrete. I’m also just throwing around some ideas here.

#10

I’m using context and usereducer hooks for state management