Cannot find name remainingTime

[Byunghyun Ban]

ERROR in src/components/selftest.tsx:35:17
TS2304: Cannot find name 'remainingTime'.
33 | return (
34 |

35 | <div key={remainingTime} className={time ${isTimeUp ? "up" : ""}}>
| ^^^^^^^^^^^^^
36 | {remainingTime}
37 |

38 | {prevTime.current !== null && (

TS2304: Cannot find name 'remainingTime'.
13 |
14 | const RenderTime = ({ remainingTime: number }) => {

15 | const currentTime = useRef(remainingTime);
| ^^^^^^^^^^^^^
16 | const prevTime = useRef(null);
17 | const isNewTimeFirstTick = useRef(false);
18 |

TS2304: Cannot find name 'remainingTime'.
17 | const isNewTimeFirstTick = useRef(false);
18 |

19 | if (currentTime.current !== remainingTime) {
| ^^^^^^^^^^^^^
20 | isNewTimeFirstTick.current = true;
21 | prevTime.current = currentTime.current;
22 | currentTime.current = remainingTime;

const RenderTime = ({ remainingTime: number }) => {
  const currentTime = useRef(remainingTime);
  const prevTime = useRef(null);
  const isNewTimeFirstTick = useRef(false);

  if (currentTime.current !== remainingTime) {
    isNewTimeFirstTick.current = true;
    prevTime.current = currentTime.current;
    currentTime.current = remainingTime;
  } else {
    isNewTimeFirstTick.current = false;
  }

  // force one last re-render when the time is over to tirgger the last animation
  if (remainingTime === 0) {
  }

  const isTimeUp = isNewTimeFirstTick.current;

  return (
    <div className="time-wrapper">
      <div key={remainingTime} className={`time ${isTimeUp ? "up" : ""}`}>
        {remainingTime}
      </div>
      {prevTime.current !== null && (
        <div
          key={prevTime.current}
          className={`time ${!isTimeUp ? "down" : ""}`}
        >
          {prevTime.current}
        </div>
      )}
    </div>
  );
};

<CountdownCircleTimer
        isPlaying
        duration={3}
        colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
        colorsTime={[3, 2, 1, 0]}
        onComplete={() => {
          setCountDown_Ready(false)
          setCountDown_60s(true)
        }}
>
        {RenderTime}
</CountdownCircleTimer>

Hi. I have a problem with useRef(remainintTime).
The codes were copied from your Live Demo, and I can't find how to fix the error.
I'm now working on React 18.2, with typescript.

Well, do I have to do something else for remainingTime?

[Vasil Dimitrov]

RenderTime is a function and it should be a component so you can use hooks inside. Try to move all of this logic in a component.

const RenderTime = ({ remainingTime }) => {
 // your logic with hooks here
}

const renderTimerChildrenFunc = ({ remainingTime }) => {
   retunrn <RenderTime  remainingTime={remainingTime} />
}

<CountdownCircleTimer
        isPlaying
        duration={3}
        colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
        colorsTime={[3, 2, 1, 0]}
        onComplete={() => {
          setCountDown_Ready(false)
          setCountDown_60s(true)
        }}
>
        {renderTimerChildrenFunc}
</CountdownCircleTimer>

[Vasil Dimitrov]

Closing due the inactivity.