Combining custom rendered and onComplete callback breaks the countdown

Hi,

I’m using a where I have both a custom renderer and a onComplete callback as seen bellow:

<Countdown
              date={Date.now() + 5000}
              renderer={this.renderCountdown}
              onComplete={() => {
                this.setState({ isAvailable: true });
              }}

renderCountdown({ hours, minutes, seconds, completed }) {
    if (completed) {
      // Render a complete state
      return (
        <div className="countdown">
          Available <span>now!</span>
        </div>
      );
    } else {
      // Render a countdown
      return (
        <div className="countdown">
          Available in
          <span className="clock">
            {hours} hours {minutes} minutes {seconds} seconds
          </span>
        </div>
      );
    }
  }

The reason I have it like this is because I have other child components that need from that isAvailable state property, but with this combination at the end of the countdown the custom renderer will not enter the completed verification, instead will always show the clock stopped at the initial start time.

Thanks so much for any help and the super useful component!

[ZuechB]

I am also having this issue, I downloaded the npm “react-countdown-now”: “^2.1.0” and using the latest ver. of next.js this.setState({ blah: true }) does not work within the complete method call for me.

[lmartins]

@ndresx Hey Martin, sorry I’ve missed your initial comment. On my project I can replicate it consistently, so my guess is something else is interfering. For now I’ve approached differently. Thanks so much for looking into this.