Develop Reference

How to change image every second in map react

Im trying to change my image every second in react inside of a map. However this doesnt seem to be working. Here is my code:
function ImageGrid() {
const {shell, gridImage} = styles
const squishAnimals = [
'/SquishAnimalDemo(1).png',
'/SquishAnimalDemo(2).png',
'/SquishAnimalDemo(3).png',
'/SquishAnimalDemo(4).png',
'/SquishAnimalDemo(5).png',
'/SquishAnimalDemo(6).png',
'/SquishAnimalDemo(7).png',
'/SquishAnimalDemo(8).png',
'/SquishAnimalDemo(9).png'
];
const [images, setImages] = useState(squishAnimals);
const [currentImage, setCurrentImage] = useState(0);
function changeBackgroundImage() {
let newCurrentImg = 0;
const noOfImages = images.length;
if (currentImage !== noOfImages - 1) {
newCurrentImg += currentImage;
}
setCurrentImage(newCurrentImg);
}
useEffect(() => {
const interval = setInterval(() => changeBackgroundImage(), 1000);
if (interval) {
clearInterval(interval);
}
});
return (
<div className={shell}>
{squishAnimals.map((image, index) => {
return (
index === 4 ?
<img className={gridImage} src={images[currentImage]} alt={`${index}-${image}`}/> :
<img className={gridImage} src={image} alt={`${index}-${image}`}/>
)
})}
</div>
);
}
Any help as to why it may not be working would be great. Thanks :)

I think it's because you immediately cancel the interval in useEffect. I believe you want to return a cleanup function to clear the interval id.
function ImageGrid() {
const {shell, gridImage} = styles
const squishAnimals = [
'/SquishAnimalDemo(1).png',
'/SquishAnimalDemo(2).png',
'/SquishAnimalDemo(3).png',
'/SquishAnimalDemo(4).png',
'/SquishAnimalDemo(5).png',
'/SquishAnimalDemo(6).png',
'/SquishAnimalDemo(7).png',
'/SquishAnimalDemo(8).png',
'/SquishAnimalDemo(9).png'
];
const [images, setImages] = useState(squishAnimals);
const [currentImage, setCurrentImage] = useState(0);
function changeBackgroundImage() {
let newCurrentImg = 0;
const noOfImages = images.length;
if (currentImage !== noOfImages - 1) {
newCurrentImg += currentImage;
}
setCurrentImage(newCurrentImg);
}
useEffect(() => {
const interval = setInterval(() => changeBackgroundImage(), 1000);
return () => {
if (interval) {
clearInterval(interval);
}
}
});
return (
<div className={shell}>
{squishAnimals.map((image, index) => {
return (
index === 4 ?
<img className={gridImage} src={images[currentImage]} alt={`${index}-${image}`} key={images[currentImage]}/> :
<img className={gridImage} src={image} alt={`${index}-${image}`} key = {`${index}-${image}`}/>
)
})}
</div>
);
}

How to seperate the two functions in ReactJS?

Introduction
I am building the countdown timer, which I had built but now I want to scale it up. So I am building two countdowns on the same page with each of them having separate start, stop buttons, and common reset button.
What do I have?
I have implemented but they are not working independently. For example, when I click on the stop of the upper clock, it also stops the lower clock.
What do I want?
I wanted to have separate functions for both of them but on the same page.
Code
Most of the things are repeated in the code.
import React, { useState, useEffect, useRef } from "react";
import "./styles.css";
const STATUS = {
STARTED: "Started",
STOPPED: "Stopped"
};
const STATUSp1 = {
STARTED: "Started",
STOPPED: "Stopped"
};
export default function InputCountDown() {
const [time, setTime] = useState(0);
const [timep1, setTimep1] = useState(0);
const [inc, setInc] = useState(0);
const handleOnChange = (e) => {
//console.log(e.target.value);
setTime(e.target.value);
setTimep1(e.target.value);
};
const handleOnChangeIncrement = (e) => {
console.log(e.target.value);
setInc(e.target.value);
};
const [secondsRemaining, setSecondsRemaining] = useState(time * 60);
const [secondsRemainingp1, setSecondsRemainingp1] = useState(timep1 * 60);
//console.log(time);
const [status, setStatus] = useState(STATUS.STOPPED);
const [statusp1, setStatusp1] = useState(STATUSp1.STOPPED);
const secondsToDisplay = secondsRemaining % 60;
const minutesRemaining = (secondsRemaining - secondsToDisplay) / 60;
const minutesToDisplay = minutesRemaining % 60;
const hoursToDisplay = (minutesRemaining - minutesToDisplay) / 60;
const secondsToDisplayp1 = secondsRemainingp1 % 60;
const minutesRemainingp1 = (secondsRemainingp1 - secondsToDisplayp1) / 60;
const minutesToDisplayp1 = minutesRemainingp1 % 60;
const hoursToDisplayp1 = (minutesRemainingp1 - minutesToDisplayp1) / 60;
const handleStart = () => {
setStatus(STATUS.STARTED);
setSecondsRemaining(time * 60);
};
const handleStartp1 = () => {
setStatusp1(STATUSp1.STARTED);
setSecondsRemainingp1(timep1 * 60);
};
const handleStop = () => {
setStatus(STATUS.STOPPED);
};
const handleStopp1 = () => {
setStatusp1(STATUSp1.STOPPED);
};
const handleReset = () => {
setStatus(STATUS.STOPPED);
setSecondsRemaining(time * 60);
setSecondsRemainingp1(timep1 * 60);
};
useInterval(
() => {
if (secondsRemaining > 0) {
setSecondsRemaining(secondsRemaining - 1);
} else {
setStatus(STATUS.STOPPED);
}
if (secondsRemainingp1 > 0) {
setSecondsRemainingp1(secondsRemainingp1 - 1);
} else {
setStatusp1(STATUSp1.STOPPED);
}
},
status === STATUS.STARTED ? 1000 : null,
statusp1 === STATUSp1.STARTED ? 1000 : null
// passing null stops the interval
);
return (
<>
<div className="App">
<h1>Countdown Using Input</h1>
<div style={{ padding: "12px" }}>
<label htmlFor="time"> Enter time in minutes </label>
<input
type="text"
id="time"
name="time"
value={time}
onChange={(e) => handleOnChange(e)}
/>
</div>
<div style={{ padding: "12px" }}>
<label htmlFor="inc"> Enter increment </label>
<input
type="number"
id="inc"
name="inc"
value={inc}
onChange={(e) => handleOnChangeIncrement(e)}
/>
</div>
<button onClick={handleStart} type="button">
Start
</button>
<button onClick={handleStop} type="button">
Stop
</button>
<button onClick={handleReset} type="button">
Reset
</button>
<div>
<button
onClick={() =>
setSecondsRemaining(secondsRemaining + parseInt(inc, 10))
}
>
Increment {inc} sec
</button>
</div>
<div style={{ padding: 20, fontSize: "40px" }}>
{twoDigits(hoursToDisplay)}:{twoDigits(minutesToDisplay)}:
{twoDigits(secondsToDisplay)}
</div>
<div>Status: {status}</div>
<div style={{ padding: 20, fontSize: "40px" }}>
{twoDigits(hoursToDisplayp1)}:{twoDigits(minutesToDisplayp1)}:
{twoDigits(secondsToDisplayp1)}
</div>
<button onClick={handleStartp1} type="button">
Start_p1
</button>
<button onClick={handleStopp1} type="button">
Stop_p1
</button>
<button onClick={handleReset} type="button">
Reset_p1
</button>
</div>
</>
);
}
// source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
// https://stackoverflow.com/a/2998874/1673761
const twoDigits = (num) => String(num).padStart(2, "0");
You can also find the code in the codesandbox in the inputCountDown.js file .
You can ignore increment button
Please help me !!!

You are using the same interval for two different counters, which causes them to sync up on the same time. Nevertheless, this code is handling too many responsibilities at once and contains unnecessary duplications that is polluting the readability of the code.
Instead of duplicating the same code with different variables names, try extracting it into its own component, and call that component twice. This way, more code isolation is ensured and is definitely less error prone, while improving readability.

Seperate the useInterval logic for each of the timer
useInterval(
() => {
if (secondsRemaining > 0) {
setSecondsRemaining(secondsRemaining - 1);
} else {
setStatus(STATUS.STOPPED);
}
},
status === STATUS.STARTED ? 1000 : null
);
useInterval(
() => {
if (secondsRemainingp1 > 0) {
setSecondsRemainingp1(secondsRemainingp1 - 1);
} else {
setStatusp1(STATUSp1.STOPPED);
}
},
statusp1 === STATUSp1.STARTED ? 1000 : null
// passing null stops the interval
);

React interval timer is not exiting when countdown gets to zero

probably a simple answer to my issue, but it is one that I cannot figure out. My countdown keeps on going past zero and into the negatives, I would like it to end when it hits zero. What am I doing wrong?
Thanks!
const [staticCountdown, setStaticCountdown] = useState(15);
const [countdown, setCountdown] = useState(15);
const setCount = (count) => {
if (!props.timerActive) {
setStaticCountdown(count);
setCountdown(count);
}
};
useEffect(() => {
let interval = null;
if (props.timerActive) {
interval = setInterval(() => {
setCountdown(countdown => countdown - 1);
}, 1000);
} else if (!props.timerActive && countdown === 0) {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [props.timerActive, countdown]);

You should change
else if (!props.timerActive && countdown === 0)
into
(if (!props.timerActive || countdown === 0)
here is an example based on you code:
const {
useEffect,
useState
} = React;
function App(){
const [timerActive, setTimerActive] = useState(true);
const handleTimerActive = () => {
setTimerActive((prev) => !prev);
};
return (
<div className="App">
<Timer timerActive={timerActive} />
<button onClick={handleTimerActive}>
{timerActive ? "Stop" : "Run"}
</button>
</div>
);
}
function Timer(props) {
const [countdown, setCountdown] = useState(15);
useEffect(() => {
let interval = null;
if (props.timerActive) {
interval = setInterval(() => {
setCountdown((countdown) => countdown - 1);
}, 1000);
}
if (!props.timerActive || countdown === 0) {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [props.timerActive, countdown]);
const handleReset = () => {
setCountdown(15);
};
return (
<div>
<h1>{countdown}</h1>
<button onClick={handleReset}>Reset</button>
</div>
);
}
ReactDOM.render( <App/> ,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

React App becomes blank when I try to update an array in the state

I am trying to manipulate the images shown in my React App by voice. I implemented the SR, which works fine:
<button onClick={SpeechRecognition.startListening}>Start</button>
I have an array of loadImages in my state, which is empty first:
const [loadImages, setLoadImages] = React.useState([]);
Whenever the word spoken is "kitten", the array of loadImages gets updated in this way:
if(transcript == "kitten")
{
const newImages = loadImages.concat({image: 'https://www.onlinekittencare.com/wp-content/uploads/2020/07/vChK6pTy3vN3KbYZ7UU7k3-1200-80.jpg'})
setLoadImages(newImages);
}
The transcript you see is a variable, which I initialized here:
const {transcript} = useSpeechRecognition();
In the render I use it to show what the SR understood, so if I say "hello" it shows "hello":
<p id="transcript">Transcript: {transcript}</p>
And this is where the images in loadImages show up:
{images.map((image) => {
return <URLImage image={image}/>;
})}
The problem is that whenever I say "kitten", which as stated above is used as a command to add the picture to the array loadImages, my React App gets blank. In the inspect I can also see that it says react-dom.development.js:14997 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
How do I fix that?
EDIT (I added the whole code):
function App() {
const [rectangles, setRectangles] = useState([]);
const [circles, setCircles] = useState([]);
const [selectedId, selectShape] = useState(null);
const [shapes, setShapes] = useState([]);
const [, updateState] = React.useState();
const stageEl = React.createRef();
const layerEl = React.createRef();
const fileUploadEl = React.createRef();
const [brushSize, setBrushSize] = React.useState('5');
const [isDrawing, setIsDrawing] = React.useState(false);
const dragUrl = React.useRef();
//const stageRef = React.useRef();
const [images, setImages] = React.useState([]);
const [loadImages, setLoadImages] = React.useState([]);
const getRandomInt = max => {
return Math.floor(Math.random() * Math.floor(max));
};
const {transcript} = useSpeechRecognition();
const URLImage = ({image}) => {
const [img] = useImage(image.src);
return (
<Image
image = {img}
x = {image.x}
y = {image.y}
offsetX = {50}
offsetY = {50}
width={200}
height={200}
draggable
/>
);
};
const drawLine = () => {
setIsDrawing(true);
if(isDrawing){
addLine(stageEl.current.getStage(), layerEl.current, brushSize);
};
};
const eraseLine = () => {
addLine(stageEl.current.getStage(), layerEl.current, brushSize, "erase");
};
const addRectangle = () => {
setIsDrawing(false);
const rect = {
x: getRandomInt(100),
y: getRandomInt(100),
width: 100,
height: 100,
fill: "red",
id: `rect${rectangles.length + 1}`,
};
const rects = rectangles.concat([rect]);
setRectangles(rects);
const shs = shapes.concat([`rect${rectangles.length + 1}`]);
setShapes(shs);
};
const forceUpdate = React.useCallback(() => updateState({}), []);
const undo = () => {
const lastId = shapes[shapes.length - 1];
let index = circles.findIndex(c => c.id == lastId);
if (index != -1) {
circles.splice(index, 1);
setCircles(circles);
}
index = rectangles.findIndex(r => r.id == lastId);
if (index != -1) {
rectangles.splice(index, 1);
setRectangles(rectangles);
}
index = images.findIndex(r => r.id == lastId);
if (index != -1) {
images.splice(index, 1);
setImages(images);
}
shapes.pop();
setShapes(shapes);
forceUpdate();
};
document.addEventListener("keydown", ev => {
if (ev.code == "Delete") {
let index = circles.findIndex(c => c.id == selectedId);
if (index != -1) {
circles.splice(index, 1);
setCircles(circles);
}
index = rectangles.findIndex(r => r.id == selectedId);
if (index != -1) {
rectangles.splice(index, 1);
setRectangles(rectangles);
}
index = images.findIndex(r => r.id == selectedId);
if (index != -1) {
images.splice(index, 1);
setImages(images);
}
forceUpdate();
}
});
if(transcript == "kitten")
{
const newImages = loadImages.concat({image: 'https://www.onlinekittencare.com/wp-content/uploads/2020/07/vChK6pTy3vN3KbYZ7UU7k3-1200-80.jpg'})
setLoadImages(newImages);
}
return (
<div className="home-page">
{loadImages.map(image => (
<img id="img" className="img"
src={image.image}
width="200"
height="200"
onDragStart={(e) => {
dragUrl.current = e.target.src;}}
/>
))}
<div
onDrop={(e) => {
e.preventDefault();
// register event position
stageEl.current.setPointersPositions(e);
// add image
setImages(
images.concat([
{
...stageEl.current.getPointerPosition(),
src: dragUrl.current,
},
])
);
}}
onDragOver={(e) =>
e.preventDefault()
}
>
<h1>Whiteboard</h1>
<button onClick={addRectangle}>
Rectangle
</button>
<button>
Circle
</button>
<button onClick={drawLine}>
Line
</button>
<button onClick={eraseLine}>
Erase
</button>
<select
value={brushSize}
onChange={(e) => {
setBrushSize(e.target.value);
drawLine();
}}
>
<option value="5">5</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
<button variant="secondary">
Text
</button>
<button variant="secondary">
Image
</button>
<button variant="secondary" onClick={undo}>
Undo
</button>
<p id="transcript">Transcript: {transcript}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<Stage
width={window.innerWidth * 0.9}
height={window.innerHeight - 150}
ref={stageEl}
dragabble
onMouseDown={e => {
// deselect when clicked on empty area
const clickedOnEmpty = e.target === e.target.getStage();
if (clickedOnEmpty) {
selectShape(null);
}
}}
>
<Layer ref={layerEl}>
{rectangles.map((rect, i) => {
return (
<Rectangle
key={i}
shapeProps={rect}
isSelected={rect.id === selectedId}
//onSelect={() => {
// selectShape(rect.id);
//}}
onChange={newAttrs => {
const rects = rectangles.slice();
rects[i] = newAttrs;
setRectangles(rects);
}}
/>
);
})}
{images.map((image) => {
return <URLImage image={image}/>;
})}
</Layer>
</Stage>
</div>
</div>
);
}
export default App;

Based on the code you've shared, it has to do with how you're updating the state if the transcript is equal to kitten.
Essentially, the logic you've written says, on render, if the transcript is kitten, update the state. BUT, when you update the state, that will re-render, and hit that logic again... and again... and again. The solution here is to wrap that in a useEffect – React Docs explain it best but in simple terms, you want to "do something" as a side effect of "something else".
In this case, if the transcript updates, you want to check the state of transcript, and if it meets a condition, you want to update your state:
React.useEffect(() => {
if (transcript === "kitten") {
const newImages = loadImages.concat({image: 'https://www.onlinekittencare.com/wp-content/uploads/2020/07/vChK6pTy3vN3KbYZ7UU7k3-1200-80.jpg'})
setLoadImages(newImages);
}
}, [transcript]);
The final piece to the useEffect is a dependency array ([transcript])–this dictates to React which item you want to watch for changes in–if transcript changes, it will run your effect and only when it changes, instead of every time it renders.

React Countdown Circle Timer Resetting When Switching Tabs

In my project, I'm using the React Countdown Clock Timer NPM package. I have two of these timers show up at once, a minutes timer and seconds timer. Everything works fine except when I switch tabs my minutes keeps the correct amount of minutes, while my seconds timer resets. I want the seconds timer to still keep the correct amount of settings even when I switch tabs.
This is my current file for the timer where the iies
import React, { useState, useContext } from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import { AuthContext } from "../../context/Auth";
import { ChillContext } from "../../context/ChillContext";
import { db } from "../../services/firebase";
import firebase from "firebase/app";
import chime from "../../sounds/chime.mp3";
import {
CountdownTimerWrapper,
CountdownTimerMain,
TimersWrapper,
RestartButton,
StartStopButton,
ButtonsWrapper,
TimerCheck,
TimerHeading,
TimerControl,
TimerText,
} from "./CountdownTimerElements";
import Toggle from "../Toggle/Toggle";
import { Howl } from "howler";
const minuteSeconds = 60;
const hourSeconds = 3600;
const renderTime = (dimension, time) => {
return (
<div className="time-wrapper">
<div className="time">{time}</div>
<div>{dimension}</div>
</div>
);
};
const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
const CountdownTimer = () => {
const stratTime = Date.now() / 1000; // use UNIX timestamp in seconds
const workEndTime = stratTime + 25 * 60; // use UNIX timestamp in seconds
const chillEndTime = stratTime + 5 * 60;
const [minutesKey, setMinutesKey] = useState(0);
const [secondsKey, setSecondsKey] = useState(10);
const [playing, setPlaying] = useState(false);
const [timerButtonDesc, setTimerButtonDesc] = useState("Start");
const { currentUser } = useContext(AuthContext);
const { chill, setChill } = useContext(ChillContext);
const chillRemainingTime = chillEndTime - stratTime;
const workRemainingTime = workEndTime - stratTime;
const timerProps = {
isPlaying: playing,
size: 100,
strokeWidth: 6,
};
const sound = new Howl({
src: [chime],
});
return (
<CountdownTimerWrapper>
<CountdownTimerMain>
<TimerHeading>Pomodoro Timer</TimerHeading>
{chill ? (
<TimersWrapper>
<CountdownCircleTimer
{...timerProps}
colors={[["#9294e3"]]}
key={minutesKey}
duration={hourSeconds}
initialRemainingTime={chillRemainingTime % hourSeconds}
onComplete={(totalElapsedTime) => {
return [chillRemainingTime - totalElapsedTime > minuteSeconds];
}}
>
{({ elapsedTime }) =>
renderTime("minutes", getTimeMinutes(hourSeconds - elapsedTime))
}
</CountdownCircleTimer>
<TimerControl>
<Toggle
onChange={(event) => {
setChill(event.target.checked);
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setTimerButtonDesc("Start");
setPlaying(false);
}}
/>
<TimerText>{chill ? "Chill" : "Work"} Timer </TimerText>
</TimerControl>
<CountdownCircleTimer
{...timerProps}
colors={[["#9294e3"]]}
key={secondsKey}
duration={minuteSeconds}
initialRemainingTime={chillRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
console.log(totalElapsedTime - chillRemainingTime);
if (totalElapsedTime - chillRemainingTime === 0) {
return false;
}
return [chillRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>
</TimersWrapper>
) : (
<TimersWrapper>
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={minutesKey}
duration={hourSeconds}
initialRemainingTime={workRemainingTime % hourSeconds}
onComplete={(totalElapsedTime) => {
return [workRemainingTime - totalElapsedTime > minuteSeconds];
}}
>
{({ elapsedTime }) =>
renderTime("minutes", getTimeMinutes(hourSeconds - elapsedTime))
}
</CountdownCircleTimer>
<TimerControl>
<Toggle
onChange={(event) => {
setChill(event.target.checked);
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setTimerButtonDesc("Start");
setPlaying(false);
}}
/>
<TimerText>{chill ? "Chill" : "Work"} Timer </TimerText>
</TimerControl>
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={secondsKey}
duration={minuteSeconds}
initialRemainingTime={workRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
if (totalElapsedTime - workRemainingTime === 0) {
db.collection("emails")
.doc(currentUser.email)
.update({
pomodoros: firebase.firestore.FieldValue.increment(1),
});
sound.play();
}
return [workRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>
</TimersWrapper>
)}
<ButtonsWrapper>
<RestartButton
onClick={() => {
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setPlaying(false);
setTimerButtonDesc("Start");
}}
>
Restart Timer
</RestartButton>
<TimerCheck />
<StartStopButton
onClick={() => {
if (timerButtonDesc === "Start") {
setTimerButtonDesc("Stop");
} else {
setTimerButtonDesc("Start");
}
setPlaying(!playing);
}}
>
{timerButtonDesc}
</StartStopButton>
</ButtonsWrapper>
</CountdownTimerMain>
</CountdownTimerWrapper>
);
};
export default CountdownTimer;

The issue you have is that you are setting "key" to minutesKey.
Everytime you change "key" the timer will reset. You want to pass a constant number in if reset is not a part of the folw. If reset is part of the flow, have a separate state for it.
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={0}
duration={minuteSeconds}
initialRemainingTime={workRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
if (totalElapsedTime - workRemainingTime === 0) {
db.collection("emails")
.doc(currentUser.email)
.update({
pomodoros: firebase.firestore.FieldValue.increment(1),
});
sound.play();
}
return [workRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>