Call multiple functions onClick ReactJS

I know in vanilla JavaScript, we can do:

onclick="f1();f2()"

What would be the equivalent for making two function calls onClick in ReactJS?

I know calling one function is like this:

onClick={f1}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Wrap your two+ function calls in another function/method. Here are a couple variants of that idea:

1) Separate method

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onClick={this.onClick}>Test Link</a>
      );
   }
});

or with ES6 classes:

class Test extends React.Component {
   onClick(event) {
      func1();
      func2();
   }
   render() {
      return (
         <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onClick={this.onClick}>Test Link</a>
      );
   }
}

2) Inline

<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onClick={function(event){ func1(); func2()}}>Test Link</a>

or ES6 equivalent:

<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onClick={() => { func1(); func2();}}>Test Link</a>

Method 2

Maybe you can use arrow function (ES6+) or the simple old function declaration.

Normal function declaration type (Not ES6+):

<link href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onClick={function(event){ func1(event); func2();}}>Trigger here</link>

Anonymous function or arrow function type (ES6+)

<link href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onClick={(event) => { func1(event); func2();}}>Trigger here</link>

The second one is the shortest road that I know. Hope it helps you!

Method 3

Calling multiple functions on onClick for any element, you can create a wrapper function, something like this.

wrapperFunction = () => {
    //do something
    function 1();
    //do something
    function 2();
    //do something
    function 3();
}

These functions can be defined as a method on the parent class and then called from the wrapper function.

You may have the main element which will cause the onChange like this,

<a href='#' onClick={this.wrapperFunction}>Some Link</a>

Method 4

Let say you have a button and you want to execute two onClick events,
to show the hidden text and hide the button with just 1 click.

let a = 'invisible'
  let b = 'visible'
  const [show, setShow] = useState(a)
  const [buttonshow, setButtonShow] = useState(b)

<button onClick={() => {setButtonShow(a); setShow(b)}}>Read More</button>
<p>This text will show after you press the button Read more and Read
more will be hidden from the DOM
</p>

as you see, the anonymous function just returned two functions.

{setButtonShow(a); setShow(b)}

Method 5

You can simply wrapped it inside []. This will worked as well in material UI button.

<Button onClick={(event) => [function1(), function2()]}>Click Me</Button>

Click to see sample code

Click to see the output

Method 6

//Don't do this way
function App() {
  return (
    <div>
      <button
        onClick={() => {
          console.log('hello');
          console.log('world');
        }}>
        I'm a button
      </button>
    </div>
  );
}

//Do this way
function App() {

  function fun1() {
    console.log('hello');
  }

  function fun2() {
    console.log('world');
  }

  return (
    <div>
      <button onClick={() => {fun1();fun2();}}>Click</button>
    </div>
  );
}

Method 7

React Functional components

             <Button
                onClick={() => {
                  cancelOrder();
                  handlerModal();
                }}
             >
                Cancel
             </Button>

Method 8

You can use nested.

There are tow function one is openTab() and another is closeMobileMenue(), Firstly we call openTab() and call another function inside closeMobileMenue().

function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
    closeMobileMenue()   //After open new tab, Nav Menue will close.  
}

onClick={openTab}

Method 9

Best Way:

onClick={ () => { f1(); f2();} }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0