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.