I'm making a countdown application in React Js and for example there is a countdown to my birthday. I want that, when my birthday has passed that it makes a countdown to my birthday in the next year. How could I do that?
This is the code from my component:
import React, {useEffect, useState} from "react";
import './styles.css';
function NewYear() {
const calculateTimeLeft = () => {
let year = new Date().getFullYear();
const difference = +new Date(`01/01/${year+1}`) - +new Date();
let timeLeft = {};
if (difference > 0) {
timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60)
};
}
return timeLeft
};
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
const [year] = useState(new Date().getFullYear());
useEffect(() => {
const timer = setTimeout(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearTimeout(timer);
});
const timerComponents = [];
Object.keys(timeLeft).forEach((interval) => {
if (!timeLeft[interval]) {
return;
}
timerComponents.push(
<span>
{timeLeft[interval]} {interval}{" "}
</span>
);
});
return (
<div className="nieuwjaar">
<h1>New Year {year+1} Countdown</h1>
{timerComponents.length ? timerComponents : <span>Time's up!</span>}
</div>
);
}
export default NewYear;