multiple functions onClick not working reactJs

Question

I am trying to call two multiple functions onClick.It doesn't work when i try to do it.But it works in single function.these are the two functions.

   //first function
saveValue = (e) => {
    // console.log('savecategory', e.target.innerHTML);

    this.setState({
        category: e.target.innerHTML
    }, this.makeAxiosRequest);

};

//second function

goToLastPage = () => {
    const {currentPage, pages, end} = this.state;
};

This is the onClick event i am trying to work.

<button   onclick={()=>{this.saveValue();this.goToLastPage()}}>Residence</button>

But it doesn't work.It only works if i call it as a single function like this.

<button onClick={this.saveValue}>Residence</button>

<button onClick={this.goToLastPage}>Residence</button>

How can i make it work?

Possible duplicate of Call multiple functions onClick ReactJS — thmsdnnr
– thmsdnnr, Commented Jun 14, 2019 at 18:56
It would be nice if you expanded on "it doesn't work" do you get an error? are your functions called at all? — Andrew L
– Andrew L, Commented Jun 14, 2019 at 18:58
i don't get any error.this functions do not execute i call multiple functions. — ariful Islam
– ariful Islam, Commented Jun 14, 2019 at 19:02

m51 · Accepted Answer · 2019-06-14 19:00:36Z

1

saveValue function needs event argument. So try this:

<button onClick={(e) => { this.saveValue(e); this.goToLastPage(); }}>Residence</button>

Also, instead onclick should be onClick

edited Jun 14, 2019 at 19:00

answered Jun 14, 2019 at 18:55

m51

2,02018 silver badges26 bronze badges

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

Comments

The Qodesmith · Accepted Answer · 2019-06-14 19:01:44Z

1

It's because in your first example you typed onclick instead of onClick. Notice the capitalization of C. React event handlers are camel-cased.

answered Jun 14, 2019 at 19:01

The Qodesmith

3,3856 gold badges34 silver badges46 bronze badges

1 Comment

ariful Islam Over a year ago

I did that part right on my code.sorry for that unwanted error here.The problem was with event argument. First reply answers my questions.Thank you

Aditya Parmar · Accepted Answer · 2019-06-14 19:14:32Z

1

You need to use onClick instead of onclick. This is a difference in HTML and Reactjs.

For more details follow this link: https://reactjs.org/docs/handling-events.html

Also check this out: Call multiple functions onClick ReactJS

<button onClick={()=>{this.saveValue();this.goToLastPage()}}>Residence</button>

answered Jun 14, 2019 at 19:14

Aditya Parmar

1,1881 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

multiple functions onClick not working reactJs

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related