Cannot reset countdown with key

[xuanhung1509]

Hi everyone,

• Context: I'm making a pomodoro. After users complete a session, thay can claim rewards and then the countdown should be reset.

• Problem: After claiming rewards, the coundown does not reset, but stuck at the completed state.

  const [key, setKey] = useState(1);
  const [isCompleted, setIsCompleted] = useState(false);
  
  const renderCountdown = ({
  completed,
  minutes,
  seconds,
  }: {
  completed: boolean;
  minutes: number;
  seconds: number;
  }) => {
  if (completed) {
    return <div>Completed</div>;
  }
  
  return (
      <span>
        {minutes}:{seconds}
      </span>
  );
  };
  
  const handleCompleted = (): void => {
  setIsCompleted(true);
  alert('Amazing Good Job!!!');
  };
  
  const handleClaimRewardClick = (): void => {
  setIsCompleted(false);
  setKey(prev => prev + 1)
  alert('Rewards claimed!');
  };
  
  return (
    <div>
      <Countdown
        key={key}
        ref={setRef}
        date={date}
        autoStart={false}
        renderer={renderCountdown}
        onComplete={handleCompleted}
      />
  
      {isCompleted && (
        <button
          onClick={handleClaimRewardClick}
        >
          Claim rewards
        </button>
      )}
    </div>
  );

However, it works for the date prop:

  const handleClaimRewardClick = (): void => {
    setIsCompleted(false);
    setDate(prev => prev + 1); // this works, but I don't want to change the date
    alert('Rewards claimed!');
  };

[ndresx]

Hi, ok, the key approach is good, but the date needs to be an absolute date time in the future, which means you would also have to adjust it in any case when some time has passed. It could then also be used as the key.

[ndresx]

I'm closing this. Please feel free to re-open or create a new issue if you still encounter this problem!