Pass Arguments To Event Handler Function In React
August 18, 2020 by Andreas Wik
Let’s say you have a component with a button. When users click the button a function should run. This could easily be done with:
<button onClick={runAudit}>Audit</button>
This will trigger the runAudit function on click as expected.
But what if you need to pass some arguments to it, like an id? You may be tempted simply do:
<button onClick={runAudit(id)}>Audit</button>
This won’t have the desired effect, though. It will trigger the runAudit function as soon as the component is mounted, and not when the button is clicked.
To get this to work, you’ll need to use an arrow function to run it:
<button onClick={() => runAudit(id)}>Audit</button>
And voila!
The runAudit function runs when the button is clicked and the arguments are passed, just the way we like it.
Share this article
