Supply numbers with a dateTime

[timrombergjakobsson]

Hi! Im trying to send in a dateTime string to the numbers prop but it does not convert it properly? Or am I doing something wrong.

return <FlipNumbers width={50} height={50} color="red" background="white" play numbers={${timeRemaining}} />;

timeRemainingbeing the dateTime string. Like this format 2021-03-10T12:00:00 for example.

[bluebill1049]

it only works for string, also supply a reproduceable csb.

[timrombergjakobsson]

@bluebill1049 csb?

import { useState, useEffect } from 'react';
import FlipNumbers from 'react-flip-numbers';

const OfferCountdown3 = ({dueDate}) => {
	const [timeRemaining, setTimeRemaining] = useState();

	useEffect(() => {
    const id = setInterval(() => {
      setTimeRemaining(Date.parse(dueDate) - Date.now());
		}, 1000)
    return ()=> clearInterval(id);
    }, []);

  return <FlipNumbers	
	width={50} height={50} color="red" background="white" play numbers={`${new Date(timeRemaining)}`} />;
};

export default OfferCountdown3;

I need to do new Date(timeRemaining) otherwise the countdown does not work.

[bluebill1049]

Codesandbox. So I can reproduce the problem.

[timrombergjakobsson]

@bluebill1049 I managed to format it, although it seems as though when it reaches zero, the end of the countdown it does not stop on zero. I keeps on counting with some "random" numbers?
https://codesandbox.io/s/eager-brahmagupta-vb0y8?file=/src/App.js

[bluebill1049]

It will re-render base on what's the number is changed to (props).