How to pass parameters to event handlers in React

For example, learn how to pass parameters to the onClick event without calling the method during installation

When using React functional components, you may need to attach events to onClick (or other events).

You usually do this:

<button onClick={addBill}>Add</button>

But what if you have to pass parameters? Suppose you have a list of lists and want to delete the list by clicking the "X" next to the list.

You cannot:

<button onClick={removeBill(index)}>𝗫</button>

Because the expression inside onClick will be executed during installation. After the app is launched, this will delete all bills in the list.

Instead, this is what you need to do with the arrow function:

<button onClick={() => removeBill(index)}>𝗫</button>

Download mine for freeResponse Handbook


More response tutorials:


Online technical encyclopedia!