reactjs - 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?

question from:https://stackoverflow.com/questions/65545639/trying-to-get-two-functions-to-run-in-a-single-onclick

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