Using react-countdown-circle-timer to render a countdown timer. Trying to create an event handler that changes the duration of the timer each time the timer reaches zero.
The clock initially runs down from 5 seconds, when it reaches zero I change the state, then use this to change the new value assigned to the clock.
For a more practical example. When the clock initially runs to zero, I change my stage state to 2, setting the timer to 6 seconds. When this clocks runs down, I change my stage state to 3, setting the timer to 7 seconds and so on, until I stop at stage 5
This is my code:
const [ timer, setTimer ] = useState(5)
const [stage, setStage] = useState(1)
const timerMap = {
2: 6,
3: 7,
4: 8,
5: 9
}
const changeTimeHandler = (timer, setTimer) => {
setStage(stage+1)
setTimer(timerMap[stage])
return { delay:1 }
}
console.log(timer)
return (
<div className="App">
<div className="timer-wrapper">
<CountdownCircleTimer
isPlaying
duration={timer}
colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
colorsTime={[10, 6, 3, 0]}
onComplete={() => (changeTimeHandler(timer, setTimer))}
size={100}
>
{renderTime}
</CountdownCircleTimer>
</div>
</div>
);
When I run my code I get the error:
Warning: Received NaN for the 'strokeDashoffset' attribute. If this is expected, cast the value to a string.
Need help figuring out how to build the logic to get the desired effect.
You don't have any condition to stop the iteration.
A simple solution would probably be:
const changeTimeHandler = (timer, setTimer) => {
// -- stop if no more stages available
if( !timerMap[stage] ){
return { shouldRepeat: false } // <-- Note: Maybe not 100% correct. I don't know this libraray.
}
setStage(stage+1)
setTimer(timerMap[stage])
return { delay:1 }
}