React click handlers not updating variable

Question

[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?

You need to provide a minimal reproducible example. Make sure the code you provided really does reproduce the problem. You've removed too much. — Quentin
– Quentin, Commented Feb 28, 2022 at 13:13

Junior Klawa · Accepted Answer · 2022-02-28 13:23:26Z

2

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

answered Feb 28, 2022 at 13:23

Junior Klawa

2791 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React click handlers not updating variable

The problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The problem

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related