Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

157
Visualizações
Running 5 countdowns successively in React

I have a countdown, I would like the countdown to run from 5 seconds to 0 and then start again, but this time running down from a different time.

In more clearer terms; I have 5 phases my timer will go through the clock will start off in phase 1, running from 5 seconds to 0. After the clock hits zero, I want to set the state to stage 2 and then run the clock from 6 seconds to 0, then set the state to phase 3, run the clock from 7 to 0, then phase 4, run from 8 to 0 and then finish at stage 5 running from 9 seconds to 0.

This is what I have tried :

const renderTime = ({ remainingTime }) => {
  if (remainingTime === 0) {
    return <div className="timer">Too late...</div>;
  }

  return (
    <div className="timer">
      { /* <div className="text">Remaining</div> */}
      <div className="value">{remainingTime}</div>
      { /* <div className="text">seconds</div> */}
    </div>
  );
};

const Timer = (props) => {
  const [ timer, setTimer ] = useState(5)
  const { remainingTime } = renderTime;
  const [stage, setStage] = useState(1)
  console.log(renderTime)
//  let text = document.querySelector('.value').innerText
//  console.log(text)

  const timerMap = {
        2: 6,
        3: 7,
        4: 8,
        5: 9
    }
  const changeTimer = (timer, stage, setStage) => {
        while (stage >= 5) {
            if(timer === 0) {
                setStage(stage+1)
                setTimer(timerMap[stage])
            }
            return timer
        }
  };

  return (
    <div className="App">
      <div className="timer-wrapper">
        <CountdownCircleTimer
          isPlaying
          duration={changeTimer(timer)}
          colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
          colorsTime={[10, 6, 3, 0]}
          onComplete={() => ({ shouldRepeat: true, delay: 1 })}
          size={100}
        >
          {renderTime}
        </CountdownCircleTimer>
      </div>
    </div>
  );
};

I am getting the error message:

Warning: Received NaN for the `strokeDashoffset` attribute. If this is expected, cast the value to a string.

Would appreciate any help

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda