Javascript - Making simple digital clock page in React (facing errors)

Deadpool
December 16, 2023
148 views
0 votes
2 Answers

I am making a simple clock, but want data to be in a single object (Rather than making 3 different states for hours, minutes and seconds. This way its more meaningful. But I am getting error. Pls help.

import React from "react";
import { useState } from "react";

export default function Ex6() {

    const date = new date();
    const [time, setTime] = useState({hours:'00', minutes:'00', seconds:'00'});

    const updatetime = () => {
        setTime({hours:date.getHours(), minutes:date.getMinutes(), seconds: date.getSeconds()});
    }

    updatetime();

    return (
        <div>
            <p>{time.hours}:{time.minutes}:{time.seconds}</p>
        </div>
    )
}

Error:

Tags: javascript reactjs

Answers

Please change to new date() ==> new Date().

You must use the useEffect.

example

import { useEffect, useState } from "react";

const Time = () => {
  const date = new Date();
  const [time, setTime] = useState({
    hours: "00",
    minutes: "00",
    seconds: "00",
  });

  useEffect(() => {
    const updatetime = () => {
      setTime({
        hours: date.getHours(),
        minutes: date.getMinutes(),
        seconds: date.getSeconds(),
      });
    };
    updatetime();
  }, []);

  return (
    <div>
      <p>
        {time.hours}:{time.minutes}:{time.seconds}
      </p>
    </div>
  );
};

export default Time;

I’m not good at English, so I used a translator

change the variable name to something else

 import React from "react";
 import { useState } from "react";

export default function Ex6() {

const currentDate = new Date();
const [time, setTime] = useState({hours:'00', minutes:'00', seconds:'00'});

const updatetime = () => {
    setTime({hours:date.getHours(), minutes:date.getMinutes(), seconds: date.getSeconds()});
}

updatetime();

return (
    <div>
        <p>{time.hours}:{time.minutes}:{time.seconds}</p>
    </div>
)

}

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Making simple digital clock page in React (facing errors)

Answers