I made a countdown timer in React using useState and useEffect hooks; everything is working great however the ternary conditional operator for seconds, where I am prepending 0 and replacing the counter value 0 with 00 for display purposes seems a bit excessive. Is there a way to simplify/shorten this, maybe setting Math.floor((counter % (1000 * 60)) / 1000) to a variable in the return ()? Not sure how to do this in React.
return (
<div className={styles.timer}>
<span className={styles.minutes}>
{Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))}
</span>
<span className={styles.colon}>:</span>
<span className={styles.seconds}>
{Math.floor((counter % (1000 * 60)) / 1000) === 0 ?
`00` :
Math.floor((counter % (1000 * 60)) / 1000) < 10 ?
`0${Math.floor((counter % (1000 * 60)) / 1000)}` :
Math.floor((counter % (1000 * 60)) / 1000)
}
</span>
</div>
)
Turn it into a string, then .padStart with '0' to 2 characters.
<span className={styles.seconds}>
{
String(Math.floor((counter % (1000 * 60)) / 1000))
.padStart(2, '0')
}
</span>
You can simply move this logic in some some function and call that function here.
handleCounter = (counter) => {
let floorValue = Math.floor((counter % (1000 * 60)) / 1000)
if(floorValue < 10){
return '0' + floorValue
} else {
return '' + floorValue
}
}
return (
<div className={styles.timer}>
<span className={styles.minutes}>
{Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))}
</span>
<span className={styles.colon}>:</span>
<span className={styles.seconds}>
{this.handleCounter(counter)}
</span>
</div>
)
I think it's a bit excessive too.
You won't be able to define the variable in the return method, instead you can solve that problem in this way.
You can add state count which has the value of Math.floor((counter % (1000 * 60)) / 1000)
So the component would be like this
function Timer () {
const [ counter, setCounter ] = useState(0)
const [ count, setCount ] = useState(0)
useEffect(() => {
var timer
setTimeout(timer = function () {
setCounter(counter + 1000)
setCount(Math.floor(((counter + 1000) % (1000 * 60)) / 1000))
}, 1000)
return () => {
clearTimeout(timer)
}
}, [counter])
return (
<div style={{color: 'white'}}>
<span>
{Math.floor(count / 60)}
</span>
<span>:</span>
<span>
{count === 0 ?
`00` :
count < 10 ?
`0${count}` :
count
}
</span>
</div>
)
}
Hope this is useful for you..