I want to call two functions passes via props on click. Note that both of them need arguments of their own. After a bit of searching on Stack Overflow, I found this solution:

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

So I implemented mine as follows:

onClick={() => {f1(arg); f2.bind(this, arg)}}

But the second function never gets called. Can anyone please explain why this isn't working? I'm assuming its some binding issue?

f1 is in the parent ponent:

f1(arg, event)
{
        event.preventDefault();
        // so on...
}

f2 is also in the parent argument as follows:

f2(arg)
{
     // do something with the argument 
}

They are getting passed to the child ponent

 render()
    {
            const { f2, arg, f1 } = this.props;
    
            return(
                <button onClick={() => {f2(arg); f1.call(this, arg)}}>
)
    }

I want to call two functions passes via props on click. Note that both of them need arguments of their own. After a bit of searching on Stack Overflow, I found this solution:

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

So I implemented mine as follows:

onClick={() => {f1(arg); f2.bind(this, arg)}}

But the second function never gets called. Can anyone please explain why this isn't working? I'm assuming its some binding issue?

f1 is in the parent ponent:

f1(arg, event)
{
        event.preventDefault();
        // so on...
}

f2 is also in the parent argument as follows:

f2(arg)
{
     // do something with the argument 
}

They are getting passed to the child ponent

 render()
    {
            const { f2, arg, f1 } = this.props;
    
            return(
                <button onClick={() => {f2(arg); f1.call(this, arg)}}>
)
    }

• javascript
• reactjs
• onclick
• react-props

4 Answers 4

Second function isn't working, because you not actually calling function using bind, you just binding scope for future function calls. If you want to call function with specified scope, use call or apply

More about them: https://stackoverflow./a/15455043/5709697

EDIT

For your case you can call second function like so:

onClick={(e) => {f1(e); f2.call(this, e)}}

Link to sandbox: https://codesandbox.io/s/509o1lxjp

Try this way

 onClick={(arg)=>{ this.f1(arg); this.f2(this, arg) }}

Or make a separate function call as below.

onClick={(arg)=>{ this.f1(arg) }}

f1(values){
this.f2(values);
}

Because you are not calling the second method just creating it using bind.

When you used () => {} with onClik, context will be maintained by arrow function, you don't need to bind those two functions after that.

Write it like this:

onClick={(e) => {
   this.f1(e, arg1, arg2, arg3);     // use f1, if function is defined outside of class
   this.f2(e, arg2)
}}

f1 (e, arg1, arg2, arg3) {
   e.preventDefault();
   console.log(arg1, arg2, arg3)
}

f2 (e, arg2) {
   e.preventDefault();
   console.log(arg2)
}

Check MDN Doc: The bind() method creates a new function.

Check these answers for more details about binding:

Use of the JavaScript 'bind' method

Why is JavaScript bind() necessary?

You can call both methods as

onClick={() =>{ this.f1(arg);this.f2(arg)}}