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:
