How to start a timer in react when a button is clicked?

Question

React

Hello!

Can you please tell me how to start the timer after clicking on the button?

That is, I have a button:

<Button disabled={isSubmitting || nextButton} htmlType="submit" type="primary">
          Submit
        </Button>

After clicking on which the timer start function should work:

const [seconds, setSeconds] = useState(60);

    useEffect(() => {
        if (seconds > 0) {
          setTimeout(() => setSeconds(seconds - 1), 1000);
          toggleNextButton(true);
        } else {
          toggleNextButton(false);
        }
    });

Timer output: The
{seconds}

question is, how to start the timer when clicked?..and hide the counter when the timer expires?

--------------------

Tried like this:

<Button disabled={isSubmitting || nextButton} onClick={handleClick} htmlType="submit" type="primary">
          Submit
        </Button>

But..it doesn't work

Answer 1

function App() {
  const [ seconds, setSeconds ] = React.useState(60);
  const [ timerActive, setTimerActive ] = React.useState(false);

  React.useEffect(() => {
    if (seconds > 0 && timerActive) {
      setTimeout(setSeconds, 100, seconds - 1);
    } else {
      setTimerActive(false);
    }
  }, [ seconds, timerActive ]);

  return (
    <div>
      {seconds
        ? <React.Fragment>
            <button onClick={() => setTimerActive(!timerActive)}>
              {timerActive ? 'stop' : 'start'}
            </button>
            <div>{seconds}</div>
          </React.Fragment>
        : <button onClick={() => setSeconds(60)}>ещё раз</button>
      }
    </div>
  );
}

https://jsfiddle.net/9rx1qhsy/1/