TypeScript - Cannot find name 'variable' in React

Question

I was trying making a clock using React (tsx), but for some reason when I tried printing hours and minutes inside a Component, It said it cannot find the name "hh". I tried also using 'var' instead of 'let' but it gives the same message.

Here's the code:

import styled from "styled-components";

const Clock = () => {
  setInterval(() => {
    let date = new Date();
    let hh: string | number = date.getHours();
    let mm = date.getMinutes();
    let day = date.getDate();
    let dayweek = date.getDay();
    let month = date.getMonth();
    let year = date.getFullYear();
    let ampm;

    if (hh >= 12) {
      hh = hh - 12;
      ampm = "PM";
    } else {
      ampm = "AM";
    }

    if (hh == 0) {
      hh = 12;
    }
    if (hh < 10) {
      hh = `0${hh}`;
    }
  }, 1000);
  return (
    <ClockContainer>
      <ClockTime>{hh}</ClockTime>
    </ClockContainer>
  );
};

const ClockContainer = styled.div`
  flex: 0.3;
  display: flex;
  align-items: center;
  font-family: Poppins;
`;
const ClockTime = styled.div`
  font-size: 98px;
  cursor: default;
  user-select: none;
  text-shadow: 3px 3px 8px #00000033;
  color: var(--fontColor);
  transition: all 500ms ease-in-out;
`;

export default Clock;

Your hh variable is declared inside, and hence is local to the setInterval inner function. It's not available outside that function. You would need to declare it in the Clock function instead, but also be ready to handle the case where react is rendering the component but the setInterval hasn't run yet. — James, Mar 02 '22 at 11:59

score 0 · Answer 1 · answered Mar 02 '22 at 12:00

Your variables date, hh, mm, ..., ampm are function-scoped, i.e. they have their context within the setInterval function. So, once the function is executed, their context gets destroyed from the memory. The variable is not found inside the component, because by the time it is called, it no longer exists.

You would need to move all your variable declarations outside the setInterval function. This would look something like this:

const Clock = () => {
  let date;
  let hh: string | number;
  let mm;
  let day;
  let dayweek;
  let month;
  let year;
  let ampm;

  setInterval(() => {
    date = new Date();
    hh = date.getHours();
    mm = date.getMinutes();
    day = date.getDate();
    dayweek = date.getDay();
    month = date.getMonth();
    year = date.getFullYear();

    // remaining code would remain as it is
    if (hh >= 12) {
       ...
}

You may find the following link useful: What is the scope of variables in JavaScript?

Can you share the code in a [CodeSandbox](https://codesandbox.io/s/new) environment? — Himanshu Patel, Mar 03 '22 at 07:19
i fixed the problem using the `useState` hook. It's working fine now. Thank you — myat myat, Mar 04 '22 at 02:45

score 0 · Answer 2 · answered Mar 02 '22 at 12:18

You declared the hh variable inside a function on setInterval, which means you're variable it's only visible on the scope of setInterval function, you cannot access this on the main scope (which is the main function).

What you could do to fix this error is add a state and set the values that you want to the state.

It's better to create your setInterval function inside a useEffect because you don't need that the component continues with the calculation if it's unmounted (learn more about the hook here)

import styled from "styled-components";
import { useEffect, useState } from "react";

const Clock = () => {
  const [hours, setHours] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      let date = new Date();
      let hh = date.getHours();
      let mm = date.getMinutes();
      let day = date.getDate();
      let dayweek = date.getDay();
      let month = date.getMonth();
      let year = date.getFullYear();
      let ampm;

      if (hh >= 12) {
        hh = hh - 12;
        ampm = "PM";
      } else {
        ampm = "AM";
      }

      if (hh == 0) {
        hh = 12;
      }
      if (hh < 10) {
        hh = `0${hh}`;
      }

      setHours(hh);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return (
    <ClockContainer>
      <ClockTime>{hours}</ClockTime>
    </ClockContainer>
  );
};

const ClockContainer = styled.div`
  flex: 0.3;
  display: flex;
  align-items: center;
  font-family: Poppins;
`;
const ClockTime = styled.div`
  font-size: 98px;
  cursor: default;
  user-select: none;
  text-shadow: 3px 3px 8px #00000033;
  color: var(--fontColor);
  transition: all 500ms ease-in-out;
`;

export default Clock;

You can understand more about scope here: https://developer.mozilla.org/en-US/docs/Glossary/Scope

TypeScript - Cannot find name 'variable' in React

2 Answers2