How to Create a Digital Clock in React JS?

Today, I am going to explain How to Create a Digital Clock in React JS? In React js programming Digital Clock is a very famous question. Mostly asked in the interviews and the colleges. Well, there are many ways from which you can make a digital clock in React js.

Following is the react digital clock example.

We will try to come up with the best and the easy way to write this code. It will give you the perfect idea about how to set time in reactjs. In this code we will be using the {useState/ Events / Java}. This will make the code easy and useful for you to understand this code.

Digital System Watch
This digital watch will be depending upon the system or computer.

Also, Try: How to Make a Login form in React JS?

Let’s see the code for react digital clock example:

Follow the following coding steps to create watch in reactjs.

index.js file

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import ‘./index.css’;

import App from ‘./App’;



    <App />




index.css file


  box-sizing: border-box;

  padding: 0;

  margin: 0;

  background-color: #d2dbdd;



  width: 100%;

  height: 100vh;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  display: flex;



  padding: 15px 20px;

  background: #9b59b6;

  color: white;

  border: 2px solid #ecf0f1;

  outline: none;

  border-radius: 5px;

  text-transform: uppercase;

  cursor: pointer;


App.js file

import React, { useState } from ‘react’;

const App = () => {

let newTime = new Date().toLocaleTimeString();

const [ctime, setCtime] = useState(newTime);

const UdateTime = () =>{

let newCTime = new Date().toLocaleTimeString();







    <h1>System Time</h1><br></br>






export default App;

Also, Try: Best React JS Project for Beginners

This is the solution for How to Create a Digital Clock in React JS? Use these codes and make your own React watch, and if you have any questions, you can comment below. Info At One trying to serve you more react projects for beginners with ease.

Leave a Reply

Your email address will not be published. Required fields are marked *