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