Call multiple functions onClick ReactJS

Question

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}

Answer 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="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

or with ES6 classes:

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

2) Inline

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

or ES6 equivalent:

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

Answer 2

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

Normal function declaration type (Not ES6+):

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

Anonymous function or arrow function type (ES6+)

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

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

Answer 3

React Functional components

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

Answer 4

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>

Answer 5

Best Way:

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

Answer 6

If you have to apply two function on a button click at the same time, then we can simply add like this in React js.

<button onClick={()=> {fun1(); fun2()}}>Show more</button>

Answer 7

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

Answer 8

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)}

Answer 9

//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>
  );
}

Answer 10

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}

Answer 11

A simple one-liner:

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