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.