There are many ways to call multiple functions onClick in React. Read on to check out those solutions and their examples.

Call Multiple Functions onClick In React

Let’s say we have three different functions below in React:

function intro() {

  const root = ReactDOM.createRoot(

    document.getElementById('root')

  );

  const element = <h1>Knowledge Portal For Programmers</h1>;

  root.render(element);

}

function welcome() {

  alert('Welcome to ITTutoria.net!');

}

const square = (a) =>  {

  console.log(a * a);

}

The first function renders a React element into the HTML document’s DOM. First we create a root DOM node with reactDOM.createRoot(). React DOM will manage everything inside this node. An element is declared and then passed by root.render() to the React element.

The welcome() function generates a simple HTML alert message box, while square() will have JavaScript print the square number of the input into the browser’s console. If you want to know other ways to display text, check out this guide.

You can call all those functions with a single onClick event in React by using these solutions.

Combine Functions Into One

You can always put all your logic code into a React function, then can call it from the onClick handler of your button.

For instance, this is how you can combine all the above functions into a big function and invoke it with a button:

import ReactDOM from 'react-dom'

  function App() {

    function welcome(a) {

      const root = ReactDOM.createRoot(

        document.getElementById('root')

      );

      const element = <h1>Knowledge Portal For Programmers</h1>;

      root.render(element);

      alert('Welcome to ITTutoria.net!');

      console.log(a * a);

 }

    return (

      <button onClick={welcome(5)}>

        Click here!

      </button>

    );}

export default App;

When you run ‘npm start’ and open the local development server, your app will display a message box, render a heading, and print the result into the console:

Output:

25

In many cases, this is the best solution. It can make the code of your app more readable and easier to understand and maintain. Unlike inline functions, this solution won’t force React to recompile the onClick event handler of your button Component.

Using An Arrow Function

You can use inline arrow functions to call multiple functions from a single onClick event in React. It is similar to the way you can do that in JavaScript.

import ReactDOM from 'react-dom'

function App() {

  function intro() {

    const root = ReactDOM.createRoot(

      document.getElementById('root')

    );

    const element = <h1>Knowledge Portal For Programmers</h1>;

    root.render(element);

  }

  function welcome() {

    alert('Welcome to ITTutoria.net!');

  }

  const square = (a) =>  {

    console.log(a * a);

  }

  return (

    <button onClick={() => {

      intro();

      welcome();

      square(5);

    }}>

      Click here!

    </button>

  );}

export default App;

The big advantage of this solution is that you don’t need to rewrite your code much. Arrow functions are just a shorter way to express methods in JavaScript. In this example, the onClick event handler invokes an arrow function, which in turn calls all three functions we want.

Use A Wrapper Function

You can also write the wrapper function, whose job is to call every function you want to invoke. This way, you don’t need to remove the declaration of your functions or use an arrow function with the onClick handler.

import ReactDOM from 'react-dom'

function App() {

  function intro() {

    const root = ReactDOM.createRoot(

      document.getElementById('root')

    );

    const element = <h1>Knowledge Portal For Programmers</h1>;

    root.render(element);

  }

  function welcome() {

    alert('Welcome to ITTutoria.net!');

  }

  const square = (a) =>  {

    console.log(a * a);

  }

  function wrapper(a) {

    intro();

    welcome();

    square(a);

  }

  return (

    <button onClick={wrapper(5)}>

      Click here!

    </button>

);}

export default App;

Summary

You can call multiple functions onClick in React by using an intermediary function, which calls them for you. And as always, you can just combine those functions into one big function. Some are more optimal than others, depending on how your application works.