The Countdown "STOPPED" when passing variables to the "date" prop.

I have a component looks like this:

function PracticeInfo({ totalQuestion, timeTest }) {
  return (
    <Grid.Row verticalAlign="middle">
      <Grid.Column width={2} textAlign="center">
        <p>
          <span className="font-semibold text-xl">
            <Countdown
              daysInHours
              date={Date.now() + timeTest * 60000}
            />
          </span>
        </p>
      </Grid.Column>
      <Grid.Column width={12} textAlign="center">
        <p>
          Total:{' '}
          <span className="font-semibold">{totalQuestion}</span>
        </p>
        <Progress value="3" total={totalQuestion} indicating progress="ratio" />
      </Grid.Column>
      <Grid.Column width={2} textAlign="center">
        <Button color="green" inverted>
          Submit
        </Button>
      </Grid.Column>
    </Grid.Row>
  );
}

As you can see, I tend to use the timeTest prop passing to the date prop of Countdown component. But it stuck at the beginning (as the status “STOPPED”). Mapping the prop to other variables didn’t work also.

But if I passing number into it, it’s work fine. Eg: Date.now() + 60 * 60000

Please help!

[ndresx]

ok, 0 would make it stop (complete) immediately in its current implementation. I’m still contemplating whether it’s better to also restart the countdown again when a date in the future is provided in such cases, but it’s not there right now.

What you could do in the meantime is to pass the date as a key which would also restart the countdown whenever this key/date changes, but on a React component level. Alternatively, you could use the API to restart it again whenever/wherever you change timeTest.

[beewithu]

I tried the API and it’s working now. Thanks for your help.