Stop previous and next button increment at a certain value - ReactJS

Question

Got a small script coded which increments left or right by 100px when clicking on the previous and next buttons.

Was wondering if there was a way to make the script stop increasing the value once it reaches a certain point (let's say -500px or +500px for example).

constructor(props) {
        super();

        this.state = {
            bgColor: 0
        };
        this.handleClickRight = this.handleClickRight.bind(this);
        this.handleClickLeft = this.handleClickLeft.bind(this);
    }

    handleClickRight(e) {
        e.preventDefault();
        this.setState({
            bgColor: this.state.bgColor - 100
          })
      }

      handleClickLeft(e) {
        e.preventDefault();
        this.setState({
            bgColor: this.state.bgColor + 100
          })
      }

    render() {
        return (
            <div>

                <div className="slider-controls">
                    <a href="#" className="slider-control prev" onClick={this.handleClickLeft}>Prev</a>
                    <a href="#" className="slider-control next" onClick={this.handleClickRight}>Next</a>
                </div>

CertainPerformance · Accepted Answer · 2018-09-07 03:33:20Z

3

You might use Math.max and Math.min when setting the state. Also check that the value is not already at the minimum or maximum first, to avoid unnecessary re-rendering:

handleClickRight(e) {
  e.preventDefault();
  const { bgColor } = this.state;
  if (bgColor !== -500) this.setState({
    bgColor: Math.max(bgColor - 100, -500)
  })
}

handleClickLeft(e) {
  e.preventDefault();
  const { bgColor } = this.state;
  if (bgColor !== 500) this.setState({
    bgColor: Math.min(bgColor + 100, 500)
  })
}

answered Sep 7, 2018 at 3:33

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

StackUnderFlow Over a year ago

Thats awesome! Works perfect and clean. Thanks so much.

Collectives™ on Stack Overflow

Stop previous and next button increment at a certain value - ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related