In my project I need to use a countdown timer for 2 minutes. In this project, React, TypeScript and ant design are used. I am using React version 18.2.0 . I designed this timer and it works properly, but it has a small problem. I just want it to show 09 instead of 9 for example when the numbers go below 10 (Like the photo below). I would be grateful if you could guide me.
.timer{
border: 1px solid red;
padding: 1rem;
width: 150px;
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { useState, useEffect } from "react";
const [seconds, setSeconds] = useState<number>(59);
const [minutes, setMinutes] = useState<number>(1);
useEffect(() => {
let timeInterval = setTimeout(() => {
if (seconds > 0) {
setSeconds(seconds - 1);
}
if (seconds === 0) {
if (minutes === 0) {
clearInterval(timeInterval);
} else {
setMinutes(minutes - 1);
setSeconds(59);
}
}
}, 1000);
return ()=> {
clearInterval(timeInterval);
};
});
<div class="timer">
<p>
{minutes}:{seconds}
</p>
</div>
