Here is my code. Whenever I play the start button, it spasms out. Any help would be appreciated! I'm wanting to, whenever I press the button, a timer for 1 second to count down based on the truthiness of isPlaying.
const [onBreak, setOnBreak] = useState(false)
const [isPlaying, setIsPlaying] = useState(false)
useEffect(() => {
const timerFunc = setInterval(() => {
setIsPlaying(!isPlaying);
if (!onBreak) {
if (sessionSec === 0 && sessionMin !== 0) {
setSessionSec(59);
setSessionMin(sessionMin - 1);
} else if (sessionSec !== 0 && sessionMin !== 0) {
setSessionSec(sessionSec - 1);
} else if (sessionSec === 0 && sessionMin === 0) {
setOnBreak(true);
}
} else if (onBreak) {
if (breakSec === 0 && breakMin !== 0) {
setBreakSec(59);
setBreakMin(breakMin - 1);
} else if (breakSec !== 0 && breakMin !== 0) {
setBreakSec(breakSec - 1);
} else if (breakSec === 0 && breakMin === 0) {
setOnBreak(false);
}
} else {
clearInterval(timerFunc);
}
}, 100);
}, [isPlaying]);
<button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>
If setIsPlaying(!isPlaying) calls useEffect() then only call setIsPlaying(1isPlaying) once in the onclick. You also need to change the interval duration to 1000 to wait for one second e.g.
const [onBreak, setOnBreak] = useState(false)
const [isPlaying, setIsPlaying] = useState(false)
useEffect(() => {
const timerFunc = setInterval(() => {
if (!onBreak) {
if (sessionSec === 0 && sessionMin !== 0) {
setSessionSec(59);
setSessionMin(sessionMin - 1);
} else if (sessionSec !== 0 && sessionMin !== 0) {
setSessionSec(sessionSec - 1);
} else if (sessionSec === 0 && sessionMin === 0) {
setOnBreak(true);
}
} else if (onBreak) {
if (breakSec === 0 && breakMin !== 0) {
setBreakSec(59);
setBreakMin(breakMin - 1);
} else if (breakSec !== 0 && breakMin !== 0) {
setBreakSec(breakSec - 1);
} else if (breakSec === 0 && breakMin === 0) {
setOnBreak(false);
}
} else {
clearInterval(timerFunc);
}
}, 1000);
}, [isPlaying]);
<button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>