Call multiple functions onClick in React
Calling multiple functions when clicking on a button is very common task we need to perform. React provide an onClick event handler to detect the user's click on an element. On this onClick event handler, we can pass an event handler function that can call as many other functions as necessary.
Let us take the below example of code.
export default function App() {
const func1 = () => {
// do something
};
const func2 = () => {
// do something
};
return (
<div>
<button
onClick={event => {
func1();
func2();
}}
>Click
</button>
</div>
);
}
In the above code, we have declared two functions func1 and func2 inside the component body. The func1 and func2 functions are invoked from the onClick event handler function which is passed as an onClick prop into the button as given below code.
<button
onClick={event => {
func1();
func2();
}}>Click
</button>
We set the onClick prop on the button, so every time user clicked on the button, the provided event handler function gets invoked. This event handler function takes the event
as a parameter even if we are not used in our code. Like func1 and func2 functions, we can add as many functions and logic into the event handler function. When adding many functions and logic in the JSX makes code difficult to maintain. We have to de-couple the view and logic code as much as possible. For de-coupling, our view code from the logic code, consider the following example.
Another possible solution is to declare the event handler function outside the JSX code. This approach will be better to make code clean, concise, and maintainable.
export default function App() {
const func1 = () => {
// do something
};
const func2 = () => {
// do something
};
const clickHandler = event => {
func1();
func2();
};
return (
<div>
<button onClick={clickHandler} >Click</button>
</div>
);
}
In this example, we have declared the clickHandler
function in the component body and passed into the onClick prop of the button. So logic code was de-coupled from our view code.
There are several reasons to use this method to perform multiple onClick events.
- Your code will be clean and concise
- Logic code is separate from view code and thus our code will be more maintainable. De-coupling our view code from the javascript logic code is extremely important
- The React Component’s onClick handler is not re-compiled when the Component re-renders (unlike with inline functions)
If we pass the function to the onClick prop, e.g. onClick={clickHandler()}
, the function will get invoked immediately when the page loads, which is not what we want. Read how to Invoke an event handler.
Conclusion
We can pass an event handler function into the onClick prop so that every time user is clicked, the provided event handler function gets invoked. Multiple functions can be invoked from this event handler function passed.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
Get the current route using React Router
Warning: The tag is unrecognized in this browser
Each child in a list should have a unique "key" prop
How to create a scroll to top button in React
Programmatically update query params in React Router
How to use Profiler API in React to measure render performance
Only one default export allowed per module
How to check internet connection(online or offline) in React
Explore All Blogs