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} 
11 Answers
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> 
5 Comments
Felix Kling
Or less optimal:
onclick={function() { f1(); f2(); }}
Alejandro Silva
Or in ES6
onclick={()=>{ f1(); f2() }}
Vadorequest
Or in cjsx:
onClick={ () => f1(); f2() }
RRR uzumaki
what if first one is asynchronous ..i want the second one to be executed only after the first one gets successfully completed
Emile Bergeron
@Ratnabhkumarrai that's a whole other concern which is unrelated to React. It's all about async in JS and
Promises are probably the answer you were looking for.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!
Comments
React Functional components
<button onClick={() => { cancelOrder(); handlerModal(); }} > Cancel </button> 
1 Comment
serraosays
Easiest option IMO
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> 
Comments
Best Way:
onClick={ () => { f1(); f2();} }
Comments
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> 
Comments
You can simply wrapped it inside []. This will worked as well in material UI button.
<Button onClick={(event) => [function1(), function2()]}>Click Me</Button> 
Comments
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)} 
Comments
//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> ); }
Comments
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} 
answered Jan 10, 2020 at 23:35
Ankit Kumar Rajpoot
5,6542 gold badges41 silver badges33 bronze badges
Comments
A simple one-liner:
onClick={ () => f1() || f2() } 
ele.onclick = ...oraddEventListener.