Friday, September 5, 2025
HomeLanguagesHow to get current date and time in firebase using ReactJS ?

How to get current date and time in firebase using ReactJS ?

The following approach covers how to get the current date and time in firebase using react. We have used the firebase module to achieve so.

Creating React Application and Installing Module:

  • Step 1: Create a React-app using the following command:

    npx create-react-app myapp
  • Step 2: After creating your project folder i.e. myapp, move to it using the following command:

    cd myapp
  •  

  • Step 3: After creating the ReactJS application, Install the firebase module using the following command:

    npm install firebase@8.3.1 --save

Project structure: Our project structure will look like this.

Example: Now implement the time and date part. Here, We are going to use a method called Timestamp which helps us to get the current date and time.

App.js




import React from 'react';
import firebase from 'firebase';
import {useState} from 'react';
  
function App() {
  // Current state
  const [curr , setCurr] = useState('');
    
  // Function to get time and date
  const getDate = () => {
      const a = firebase.firestore
          .Timestamp.now().toDate().toString();
      setCurr(a);
  }
    
  return (
    <div>
      <center>
        <h1>{curr}</h1>
        <button onClick={getDate}>Show Date</button>
      </center>
    </div>
  );
}
  
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32264 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6634 POSTS0 COMMENTS
Nicole Veronica
11801 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11861 POSTS0 COMMENTS
Shaida Kate Naidoo
6750 POSTS0 COMMENTS
Ted Musemwa
7025 POSTS0 COMMENTS
Thapelo Manthata
6698 POSTS0 COMMENTS
Umr Jansen
6718 POSTS0 COMMENTS