How to make a Digital Clock using React ?

This is how our Digital Clock is going to appear 👇

The first step would be setting up our React application and for that, you need to choose a development environment. For this project, we’ll use create-react-app, but feel free to choose another environment that suits your preferences.

To setup your react application follow these steps :

1. Run the following command in your terminal:

npx create-react-app my-app

if the above command doesn’t work, run this command:

npm init react-app my-app

2. Navigate to the root directory of your new React app:

cd my-app

3. Run your build process with `npm start`:

npm start

We have setup our react application, Now we will open App.js and start writing code for our Digital Clock app.

first we will create a state variable called ‘time’, where our time will be saved and then we will create a function called ‘UpDateTime’.

App.js :

import { useState } from "react";

function App() {
  const [time, setTime] = useState();
  
  const UpDateTime = () => {};
  
  return (
    <div className="App"></div>
  );
}

export default App;

Inside ‘UpDateTime’ we will create a variable called ‘now’. The now variable will store the current time and we will use the built-in “new Date()“ function to get the current time, which will be assigned to “now“.

`new Date()` is a feature in JavaScript that helps you get the current date and time. You can use it to show current date and time in your react applications.

but `new Date()` returns the current date and time in
this format:👉 “Mon May 15 2023 13:48:20 GMT+0530 (India Standard Time)”,
but we only want time not the other stuff.

To do that JavaScript provides us with an in-built method “toLocaleTimeString()“, this method converts a Date object to a string representing the time portion of the Date, using the locale-specific time formatting conventions,
like this :👉 “1:48:20”.

Then we will update our state variable `time` with the current time using the “setTime” function and pass the ‘time’ variable to our div component so that we will be able to see the time on the screen. We will also provide some CSS classes to our div component in inside the “style” attribute.

App.jsx :

// import { useState } from "react";

// function App() {
//  const [time, setTime] = useState();
  
  const UpDateTime = () => {
  const now = new Date().toLocaleTimeString();
    setTime(now);
  };
  
  UpDateTime();
//  return (
   <div className="App" style={{
        height: "100%",
        display: "flex",
        justifyContent: "center",
        fontSize: "130px",
      }} >{time}</div>
//  );
// }

// export default App;

but here we will get a problem, the problem is that the clock is not dynamic and does not update to show the current time in real-time. Instead, it shows a fixed time that was captured when the clock was first rendered. This means that the clock does not change even though time is passing, and the displayed time is not accurate.

To fix the problem we will use “setInterval( )“ method, “setInterval() “is a built-in method in JavaScript that allows you to execute a function repeatedly at a specified interval (time delay) in milliseconds.

We will pass “UpDateTime( )” function and a time interval of 1 second to the setInterval( ) method and it will call our function in every 1 second which will update the state variable “time” and we will be able to show the latest time in our screen.

App.jsx :

// import { useState } from "react";

// function App() {
//  const [time, setTime] = useState();
  
//  const UpDateTime = () => {
//  const now = new Date().toLocaleTimeString();
//    setTime(now);
//  };
  
 setInterval(UpDateTime, 1000);
//  return (
//   <div className="App" style={{
//        height: "100%",
//        display: "flex",
//        justifyContent: "center",
//        fontSize: "130px",
      }} >{time}</div>
//  );
// }

// export default App;

Final Code :- App.js

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

function App() {
  const [time, setTime] = useState();

  const UpDateTime = () => {
    const now = new Date().toLocaleTimeString();
    setTime(now);
  };

  setInterval(UpDateTime, 1000);

  return (
    <div
      className="App"
      style={{
        height: "100%",
        display: "flex",
        justifyContent: "center",
        fontSize: "130px",
      }}
    >
      {time}
    </div>
  );
}

export default App;

I hope you liked the blog🙏