Bviveksingh

useEffect(() => {
  setReadableFormat(getReadableFormat);
},[counterInSeconds]);

Bviveksingh

useEffect(() => {
  setCounterInSeconds(timeInSeconds);
},[timeInSeconds]);

Bviveksingh

useEffect(() => {
  if(counterInSeconds as number > 0 && startTimer){
      setTimeout(() => {
        setCounterInSeconds(prevCount => prevCount as number - 1);
        setReadableFormat(getReadableFormat);
      }, 1000);
  }
  if(counterInSeconds === 0){
      endTimerFunc();
      setCounterInSeconds(timeInSeconds);

Bviveksingh

    const getReadableFormat = useMemo(() => {
        let seconds : string | number = counterInSeconds as number % 60;
                let minutes : string | number = Math.floor(counterInSeconds as number / 60);
                minutes = minutes.toString().length === 1 ? "0" + minutes : minutes;
                seconds = seconds.toString().length === 1 ? "0" + seconds : seconds;
                return `${minutes} : ${seconds}`;
    }, [counterInSeconds]);

Bviveksingh

import React, { FC, useEffect, useMemo, useState } from 'react'

interface TimerProps {
    startTimer: boolean;
    endTimerFunc: () => void;
    timeInSeconds: number;
}

const Timer : FC<TimerProps> = ({
    startTimer,

Bviveksingh

{endTimer && displayResult()}

Bviveksingh

const [inputVal, setInputVal] = useState<string>('');

Bviveksingh

{inputVal.length > 0 && <button>Reset</button>} 

Bviveksingh

const [endTimer, setEndTimer] = useState<boolean>(false);
const [eligibleToStart, setElegibleToStart] = useState<boolean>(false);

Bviveksingh

{!endTimer && eligibleToStart && <InputBox/>}