Call multiple functions onClick in React

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.

Related Blogs

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Pass event and parameter onClick in React

How to pass event and parameter onClick in React

We set the inline arrow function (event) => clickHandler(event, "Hello World!") as props to the onClick event handler in the button. The arrow function takes the event as an argument and calls the clickHandler function.

Create a Back button with React Router

Create a Back button with React Router

To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.