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

Azamat Zorkanov · Accepted Answer · 2018-07-20 06:00:20Z

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

edited Jul 20, 2018 at 6:00

answered Jul 20, 2018 at 5:28

Azamat Zorkanov

8191 gold badge5 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mikasa Over a year ago

How will I call the function here after binding it?

mikasa Over a year ago

I also need to pass argument to f2. So will that be implemented like f2.call(this,e,arg) ?

mikasa Over a year ago

Gives 'TypeError: event.preventDefault is not a function'. Why do we have to pass event when we've already passed this?

Azamat Zorkanov Over a year ago

Actually, as @Mayank Shukla said, there are no need to call second function using call(or maybe the need exist, depends on situation). I've provided sandbox, where that funtionality, which you asking for works. Maybe you can edit with your code, and show us, what's going on?

mikasa Over a year ago

My answer is updated. Can you please share the sandbox?

|

Krina Soni · Accepted Answer · 2018-07-20 05:04:58Z

2

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

answered Jul 20, 2018 at 5:04

Krina Soni

9306 silver badges14 bronze badges

1 Comment

RRR uzumaki Over a year ago

what if first one is asynchronous ..i want the second one to be executed only after the first one gets successfully completed

Mayank Shukla · Accepted Answer · 2018-07-20 05:23:15Z

1

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?

edited Jul 20, 2018 at 5:23

answered Jul 20, 2018 at 5:13

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

5 Comments

mikasa Over a year ago

The second function has got the event property so I need to pass this as an argument. Doing what you suggested gave me the error: '× TypeError: Cannot read property 'preventDefault' of undefined'

Mayank Shukla Over a year ago

that means you forgot to pass the event object to functions, check the updated answer.

Mayank Shukla Over a year ago

if you don't want to use the event in any function then don't pass as an argument, lets say you want only in 2nd function, then remove from 1st function, like this: this.f1(arg1, arg2, arg3); and remove from function argument also.

mikasa Over a year ago

TypeError: _this2.f1 is not a function

Mayank Shukla Over a year ago

@eren555 can you show the full code, where you have defined the f1 and f2 and the element on which you are using the click handler?

Harikrishnan · Accepted Answer · 2018-07-20 05:36:21Z

1

You can call both methods as

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

edited Jul 20, 2018 at 5:36

answered Jul 20, 2018 at 5:09

Harikrishnan

1,0978 silver badges13 bronze badges

2 Comments

Mayank Shukla Over a year ago

binding of those methods are not required, because you are normally calling them :)

RRR uzumaki Over a year ago

what if first one is asynchronous ..i want the second one to be executed only after the first one gets successfully completed

Collectives™ on Stack Overflow

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

4 Answers 4

6 Comments

1 Comment

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related