Closed CA1R7 closed 1 year ago
Hi, what's the value you are passing into date
?
@ndresx , it's timestamp 1678614332535
@ndresx , I just found the solution, so each update means render right, and in this case we need renderer component return a unique element using key attribute, so when i tried to add key
attribute but it must be unique, it worked!
so here's my code, i just added key attribute:
const renderer: CountdownRendererFn = ({
seconds,
minutes,
hours,
days,
completed,
}) => {
if (completed) {
return "Completed";
} else {
let avItems = [days || 0x0, hours || 0x0, minutes || 0x0, seconds || 0x0];
for (let i = 0x0; i < avItems.length; i++) {
if (!avItems[i]) {
avItems.splice(i, 0x1);
i--;
} else {
break;
}
}
let avItemsStr = avItems.map((item) => (item < 0xa ? `0${item}` : item));
- return <span style={{ marginLeft: "3px" }}>{avItemsStr.join(":")}</span>;
+ return <span style={{ marginLeft: "3px" }} key={avItems.join("")}>{avItemsStr.join(":")}</span>;
}
}
};
just one other point i've to mention the default renderer have the same issue, so i hope this will help u
Could you eventually give me a codesandbox example or similar to reproduce this, please?
Does this work for you https://codesandbox.io/s/sad-zhukovsky-hs7hc?
yeah, it worked on sandbox
@ndresx thank you for your time
I already checked the old issues but no one of them worked, the problem here it's not counting at all, it's stuck like that, but if i tried on chrome it'll work normally
here's my code:
<Countdown date={data?.endsAt} autoStart renderer={renderer}>
and renderer:
i've latest version of safari