Pass the key on onClick event - React

Question

I pass the key of my Hook that I map, like this :

Object.entries(userWalletIncomes).map(([key, value]) => {
                        return (
                            <div id="incomeTable" className="text-left mx-auto flex" key={key}>
                                <p className="w-32 border p-1 capitalize">{key} :</p>
                                <p className="w-32 border p-1 text-green-500">{value}€</p>
                                <button onClick={(key) => handleDeleteIncome(key)}><i className="fas fa-times text-red-400 border p-1"></i></button>
                            </div>
                        )
                    })

And on click on the button, I give the key in the call of the function.

When I log it, instead of giving the simple string, it gives me this :

SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: MouseEvent, target: i.fas.fa-times.text-red-400.border.p-1, …}

Inside of this object, there isn't my key. I don't understand why. Where is my mistake ? 🤨

Thanks for helping me understand

Just remove (key) from the parameters, then you are good to go ;) I.e leave it like onClick={()=>handleDeleteIncome(key)). What you are doing is that you are passing the event of your click (naming it as key) instead of actually passing the variable you want. — Sandmountain
– Sandmountain, Commented Jun 29, 2021 at 14:31
@ViktorSandberg Ok I understand better my mistake. Thank you ! — user14265379
– user14265379, Commented Jun 29, 2021 at 14:33

szilagyi.sandor · Accepted Answer · 2021-06-29 14:28:42Z

1

<button onClick={(event) => handleDeleteIncome(key)}>
  <i className="fas fa-times text-red-400 border p-1"></i>
</button>

You are simply redeclaring the "key" variable in the onClick event.

answered Jun 29, 2021 at 14:28

szilagyi.sandor

2241 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user14265379 Over a year ago

Omg... Sometime the answer is so logical we don't even see it. Thank you very much. 🙂

Collectives™ on Stack Overflow

Pass the key on onClick event - React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related