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

This article provides a detailed walkthrough on obtaining the current date and time in a Firebase environment using ReactJS. Readers will gain insights into the implementation process, enabling date and time functionalities into their React projects powered by Firebase.

Prerequisites:

• Node JS or NPM
• React JS
• Firebase

Steps to Create 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:

The updated dependencies in package.json file will look like:

"dependencies": {
    "firebase": "^8.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

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.

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