I have a countdown, I would like the countdown to run from 5 seconds to 0 and then start again, but this time running down from a different time.
In more clearer terms; I have 5 phases my timer will go through the clock will start off in phase 1, running from 5 seconds to 0. After the clock hits zero, I want to set the state to stage 2 and then run the clock from 6 seconds to 0, then set the state to phase 3, run the clock from 7 to 0, then phase 4, run from 8 to 0 and then finish at stage 5 running from 9 seconds to 0.
This is what I have tried :
const renderTime = ({ remainingTime }) => {
if (remainingTime === 0) {
return <div className="timer">Too late...</div>;
}
return (
<div className="timer">
{ /* <div className="text">Remaining</div> */}
<div className="value">{remainingTime}</div>
{ /* <div className="text">seconds</div> */}
</div>
);
};
const Timer = (props) => {
const [ timer, setTimer ] = useState(5)
const { remainingTime } = renderTime;
const [stage, setStage] = useState(1)
console.log(renderTime)
// let text = document.querySelector('.value').innerText
// console.log(text)
const timerMap = {
2: 6,
3: 7,
4: 8,
5: 9
}
const changeTimer = (timer, stage, setStage) => {
while (stage >= 5) {
if(timer === 0) {
setStage(stage+1)
setTimer(timerMap[stage])
}
return timer
}
};
return (
<div className="App">
<div className="timer-wrapper">
<CountdownCircleTimer
isPlaying
duration={changeTimer(timer)}
colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
colorsTime={[10, 6, 3, 0]}
onComplete={() => ({ shouldRepeat: true, delay: 1 })}
size={100}
>
{renderTime}
</CountdownCircleTimer>
</div>
</div>
);
};
I am getting the error message:
Warning: Received NaN for the `strokeDashoffset` attribute. If this is expected, cast the value to a string.
Would appreciate any help