React click handlers not updating variable

February 28, 2022

[EDIT] – Added a bit more detail to the code sample.

I’m trying to build a timer component. This is my code.

const Timer = () => {
  let startTime;

  const handleStart = () => {
    startTime = Date.now();
    console.log(startTime);
  };

  const handleEnd = () => {
    console.log(startTime);
  };

  return (
    <>
      <button
        onClick={handleStart}
      >
        Start timer
      </button>

      <button
        onClick={handleEnd}
      >
        End timer
      </button>
    </>
  )
}

handleStart is the click handler for one button and handleEnd is the click handler for the second button.

The problem

When I click the first button to start the timer, everything works and the value of startTime is logged to the console, so I know it has been assigned. However, when I click the second button to stop the timer, it doesn’t log startTime. Instead, the console output is undefined.

I have no idea why this is happening. Can someone explain why this code isn’t working?

>Solution :

In React, you can’t just assign a value to a variable, you have to set the state, like the example below:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [startTime, setStartTime] = useState();

  const handleStart = () => {
    const dateNow = Date.now();
    console.log(dateNow);
    setStartTime(dateNow);
  };

  const handleEnd = () => {
    console.log(startTime);
  };

  return (
    <div className="App">
      <button type="button" onClick={handleStart}>
        Start
      </button>
      <button type="button" onClick={handleEnd}>
        End
      </button>
      <p>{startTime}</p>
    </div>
  );
}

Example in codebox