CODEWITHSUNDEEP
javascriptreactjs
ariful Islam
ariful Islam

Reputation: 107

multiple functions onClick not working reactJs

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?

Upvotes: 0

Views: 713

Answers (3)

Aditya Parmar
Aditya Parmar

Reputation: 1179

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>

Upvotes: 1

The Qodesmith
The Qodesmith

Reputation: 3375

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

Upvotes: 1

m51
m51

Reputation: 2010

saveValue function needs event argument. So try this:

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

Also, instead onclick should be onClick

Upvotes: 1

Related Questions