Trying to get two functions to run in a single onclick

Question

I am trying to update a number onclick to display 10 more instances when clicking a "load more button", however I am trying to get that button to disappear when the number of instances > the number returned in my array. I have tried to get both of these updates to happen here:

      <a className="LoadMoreButton" onClick={() => this.setState({ VisibleNo: this.state.VisibleNo+10})} style={{display: this.state.LoadMoreVis}}>Load More</a>

with the function called being:

allloaded = () => {
    if (this.state.data.length < this.state.VisibleNo)
    this.setState({LoadMoreVis: 'none'})
  }

Is there a simple way to have both of these functions successfully run onclick?

Does this not help you ? https://stackoverflow.com/questions/26069238/call-multiple-functions-onclick-reactjs — Guillaume, Jan 03 '21 at 00:59

luckongas · Accepted Answer · 2021-01-05T12:18:35.110

1

You should use conditional rendering to solve this problem as well as executing both functions on the onClick event.

checkAllLoaded = () => {
  if (this.state.data.length < this.state.VisibleNo)
    this.setState(prevState => ({...prevState, LoadMoreVis: 'none'}));
}

handleClick = () => {
  this.setState(prevState => ({...prevState,  VisibleNo: this.state.VisibleNo+10}));
  checkAllLoaded();
}

{this.state.LoadMoreVis !== "none" && <a className="LoadMoreButton" onClick={handleClick} style={{display: this.state.LoadMoreVis}}>Load More</a>}

edited Jan 05 '21 at 12:18

answered Jan 03 '21 at 00:56

luckongas

1,651
8
17

2

Also he should spread the current state during the `setState` call, to avoid losing the other properties of the state object – Jayce444 Jan 03 '21 at 01:02

Trying to get two functions to run in a single onclick

1 Answers1