Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

275
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda