In React, how to call multiple functions with their own arguments?

Question

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 component:

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 component

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

Answer 1

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.com/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