Gostaria de saber como executar a pausa nesse relógio.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Gostaria de saber como executar a pausa nesse relógio.
Para adicionar uma funcionalidade de pausa a um relógio em um aplicativo React, você pode seguir estas etapas:
Adicione um estado para controlar se o relógio está pausado ou não: Você pode usar o estado do React para controlar se o relógio está pausado ou não. Por exemplo: jsx Copy code import React, { useState, useEffect } from 'react';
function Relogio() { const [pausado, setPausado] = useState(false); const [tempo, setTempo] = useState(new Date());
useEffect(() => { const timerID = setInterval(() => { if (!pausado) { setTempo(new Date()); } }, 1000);
return () => clearInterval(timerID);
}, [pausado]);
const togglePausado = () => { setPausado(!pausado); };
return (
export default Relogio; Neste exemplo, criamos um estado pausado para controlar se o relógio está pausado ou não. Também temos um estado tempo para armazenar a hora atual. Usamos setInterval para atualizar o tempo a cada segundo, mas apenas se o relógio não estiver pausado.
Adicione um botão para pausar o relógio: No exemplo acima, adicionamos um botão que alterna o estado pausado entre true e false quando clicado. Dependendo do estado atual, o botão exibirá 'Iniciar' ou 'Pausar'. Com essas alterações, seu relógio React agora terá a capacidade de ser pausado e reiniciado quando necessário.
Atenciosamente, Danilo O. Pinheiro CEO DevsFree & MasterMind | Arquiteto De Software | Arquiteto De Soluções | Engenheiro de Nuvem | Arquiteto Corporativo De Software | Gerente de Projetos | Líder técnico | Arquiteto Tecnológico