Olá, sou iniciante em programação e estou tentando me entender com o react, quando me deparei com um problema que não acho solução a dias ..
Eu quero passar as datas em negrito armazenadas na array do arquivo Lists.js, do trecho separado 1, para serem usadas no trecho 2 no arquivo contador.js, exibindo na tela junto com os elementos do trecho separado 3, respeitando o ID e usando a data de cada grupo de elementos da array Lists
1 - data_final: '2022-4-12'
2 - const timeRemaining = new Date('***2022-5-2***') - new Date();
3 - <a href={sorteios.referral}><img src={sorteios.image_url} alt={sorteios.title}/></a>
Eu gostaria um codigo em java que usasse a data de cada elemento do array e exibisse o contador de acordo com a data informada de cada lista do array
const timeRemaining = new Date({codigo aqui}) - new Date();
Abaixo os trechos dos códigos que estou usando, sem as importações e outros elementos que não interagem com o contador , desde ja agradeço a atenção e o help! Obrigado!
export const Lists = [
{
id: '1',
referral: '',
title: '',
data_final: '22-4-12',
image_url: ''
},
{
id: '2',
referral: '',
title: '',
data_final: '22-4-11',
image_url: ''
},
{
id:'3' ,
referral: '',
title: '',
data_final: '22-4-2',
image_url: ''
},
function Grid() {
return (
<Container>
<h1>Logo</h1>
<RedesSociais>
<a href="https://www.google.com/" target="_blank" rel="noreferrer"><img src={Twitter} alt="twitter" width="28px" height="28px"></img></a>
<a href="https://www.google.com/" target="_blank" rel="noreferrer"><img src={Telegram} alt="telegram" width="28px" height="28px"></img></a>
</RedesSociais>
<List>
{lists.map(sorteios => {
return (
<Sorteios>
<Elemento key={sorteios.id}>
<a href={sorteios.referral} target="_blank" rel="noreferrer"><img src={sorteios.image_url} alt={sorteios.title}/></a>
</Elemento>
<Contador/> // Aqui exibe direitinho a data, porém a mesma em todos!
</Sorteios>
)
})}
</List>
</Container>
)
}
export default Grid;
Código do countdown que acaba aparecendo em todos os elemento exibidos pelo array
const Contador = () => {
const getCountdown = () => {
const timeRemaining = new Date(`2022-5-2`) - new Date();
let countdown = {};
if (timeRemaining > 0) {
countdown = {
Days: Math.floor(timeRemaining / (1000 * 60 * 60 * 24)),
Hours: Math.floor((timeRemaining / (1000 * 60 * 60)) % 24),
Minutes: Math.floor((timeRemaining / 1000 / 60) % 60),
};
}
return countdown;
};
const [countdown, setCountdown] = useState(getCountdown());
useEffect(() => {
setTimeout(() => {
setCountdown(getCountdown());
}, 1000);
});
const data = [];
Object.entries(countdown).forEach(([unit, value]) => {
data.push(
<li key={Math.random().toString(16)}>
<strong>{value}</strong> {unit}
</li>
);
});
return (
<div>
<Visor>{data}</Visor>
</div>
);
};
export default Contador;