Call Multiple Functions onClick in React

Creating interactive user interfaces in React often involves managing events like onClick. These events can trigger various actions or functions in your application. When it comes to handling multiple functions on a single event, such as a button click, there exist several approaches to achieve this goal. This article will explore two different methods for Call multiple functions onClick in React.

Method: 1 Using Function Composition

Here’s a simple technique for calling multiple functions when a button is clicked in React. We achieve this by using a Function Composition. This method entails creating a new function right where it’s needed, which then calls the functions you want to execute.

import React from 'react';

function App() {
  const handleClick = () => {
    function1();
    function2();
  };

  const function1 = () => {
    console.log('Function 1 is executed');
  };

  const function2 = () => {
    console.log('Function 2 is executed');
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

export default App;

In this code snippet, handleClick is the main function responsible for triggering both function1 and function2 upon a button-click event. This method is particularly handy for smaller projects or when you prefer to keep your code structure clear.

Method: 2 Inline Arrow Function

We can also call multiple functions directly within the onClick the event handler, using an inline arrow function.

import React from 'react';

export default function App() {
  const function1 = () => {
    console.log('Function 1 called');
  };

  const function2 = () => {
    console.log('Function 2 called');
  };
	
  return (
    <div>
      <button
        onClick={event => {
          function1();
          function2();
        }}
      >
        Click
      </button>
    </div>
  );
}

Conclusion

Calling multiple functions onClick in React can be achieved using various approaches. we can choose the method that best fits your specific use case and coding style. Whether it’s using inline arrow functions or function composition, React provides flexibility to handle events in a way that suits our application’s needs. Remember to select the approach that aligns with the complexity of our application and our coding preferences. With these techniques, we can efficiently handle multiple function calls in your React components.

You may also like:

• export useHistory was not found in react-router-dom
• Can Not Read Properties of Undefined Reading Map in React JS
• How to Make Image Slider In React