Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

280
Views
How can i let countdown switch automatically to the next year if the date has passed at the current year?

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;
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!