TypeScript - Cannot find name 'variable' in React-CodePudding

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;

CodePudding user response：

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?

CodePudding user response：

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