'how to fix increments fn timer app in react
hello dev's iam tring to build timer pomodoro react app my problem is when i start call function that increments timer with setInterval its returns 0 and 1 and repeat 0 and 1 No more than 0 and 1
my code is :
import React, { useRef, useState } from "react";
import Timer from "./Timer";
import styles from "../css/pomodoro.module.css";
const Pomodoro = () => {
const [start, setStart] = useState(false);
const [intervalRef, setIntervalRef] = useState(0);
const [cycles, setCycles] = useState(0);
const [seconds, setSeconds] = useState(0);
const [minutes, setMinutes] = useState(0);
const startTimer = () => {
return setInterval(() => {
seconds <= 59 ? setSeconds(seconds + 1) : setSeconds(0);
}, 1000);
};
const stopTimer = () => {
clearInterval(intervalRef);
};
function handleStartPomodoro() {
setStart(!start);
if (start === false) {
setIntervalRef(startTimer());
startTimer();
console.log("start");
}
if (start === true) {
stopTimer();
console.log("stop");
}
}
return (
<div className={styles["app-wrapper"]}>
<Timer seconds={seconds} minutes={minutes} />
<div className={styles["buttons-wrapper"]}>
<button type="button" onClick={() => handleStartPomodoro()}>
Start
</button>
<button type="button"> reset</button>
</div>
</div>
);
};
export default Pomodoro;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
