[Solução] Bug Data exibindo dia anterior

Reparei que ao colocar uma data, por exemplo, 01/09/2023, é renderizado a data do dia anterior 31/08/2023.

Esse problema é devido à forma como o elemento do tipo "date" do HTML lida com datas. Ele armazena as datas no formato ISO (YYYY-MM-DD), mas não inclui a informação de fuso horário. Quando você cria uma nova data em JavaScript usando essa string ISO, ela é interpretada como meia-noite (00:00:00) no fuso horário local, o que pode resultar em um dia anterior, dependendo do fuso horário do sistema.

Uma solução para garantir que a data seja representada corretamente é adicionar a informação de fuso horário à data antes de formatá-la. Você pode fazer isso definindo a hora para o meio-dia (12:00:00) no fuso horário UTC (que não tem deslocamento de fuso horário) antes de formatar a data. Dessa forma, você garante que a data não seja deslocada devido ao fuso horário local.

Portanto, minha solução foi a seguinte: 1- Criei uma const DataLocal que vai armazenar new Date(${data}T12:00:00Z), ou seja, estou utilizando new Date e passando a props data e o horário de meio dia. 2- Criei outra const agora chamada de dataFormatada que vai armazenar new Date(dataLocal).toLocaleDateString() que vai pegar somente a data e aplicar o toLocaleDateString(). 3- Por fim, foi passado a const dataFormatada que vai conter a data no dia exato escolhid, ficando da seguinte forma <h5>{dataFormatada}</h5>.

Tudo isso foi feito no componente Colaborador ficando da seguinte forma: ` import './Colaborador.css';

interface ColaboradorProps { nome: string imagem: string cargo: string corDeFundo: string data: string }

const Colaborador = ({ nome, imagem, cargo, corDeFundo, data }: ColaboradorProps) => { const dataLocal = new Date(${data}T12:00:00Z); const dataFormatada = new Date(dataLocal).toLocaleDateString();

return (<div className='colaborador'>
    <div className='cabecalho' style={{ backgroundColor: corDeFundo }}>
        <img src={imagem} alt={nome}/>
    </div>
    <div className='rodape'>
        <h4>{nome}</h4>
        <h5>{cargo}</h5>
        <h5>{dataFormatada}</h5>
    </div>
</div>)

}

export default Colaborador `

Talvez, não seja a melhor forma, mas funcionou pra mim.