CODEWITHSUNDEEP
reactjs
TSto
TSto

Reputation: 29

Trying to get two functions to run in a single onclick

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?

Upvotes: 0

Views: 37

Answers (1)

luckongas
luckongas

Reputation: 1799

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

Upvotes: 1

Related Questions