In this article, we will learn how to fetch data from Firestore and display it inside a React application. Firestore is a NoSQL database developed by Google as an alternative to the firebase database. It has been designed to provide a better developer experience and simplify the development process. The below steps demonstrate the process of creating the application.
Step 1: Create a new React application. We use create-react-app to create our application.
npx create-react-app gfgfirestore
Step 2: Install the firebase package in the project using npm.
npm install firebase@8.3.1 --save
Step 3: Create a new project from the Firebase dashboard by filling in the necessary details and check the format of the data that is stored in Firestore. In this example, we have an object in which name, age, and courseEnrolled are the fields in which data is stored.
Step 4: Initialize Firebase in the project by copying the relevant credentials from the Firebase dashboard.
Javascript
import firebase from 'firebase';var firebaseConfig = { // Firebase credentials};// Initialize Firebasefirebase.initializeApp(firebaseConfig);var db = firebase.firestore();export default db; |
Step 5: Create a basic User Interface for adding data to the store.
Javascript
import db from './firebase';import { useState } from 'react';const Firestore = () => { const [name, Setname] = useState(""); const [age, Setage] = useState(""); const [course, Setcourse] = useState(""); const sub = (e) => { e.preventDefault(); // Add data to the store db.collection("data").add({ Nane: name, Age: age, CourseEnrolled: course }) .then((docRef) => { alert("Data Successfully Submitted"); }) .catch((error) => { console.error("Error adding document: ", error); }); } return ( <div> <center> <form style={{ marginTop: "200px" }} onSubmit={(event) => { sub(event) }}> <input type="text" placeholder="your name" onChange={(e) => { Setname(e.target.value) }} /> <br /><br /> <input type="number" placeholder="your age" onChange={(e) => { Setage(e.target.value) }} /> <br /><br /> <input type="text" placeholder="Course Enrolled" onChange={(e) => { Setcourse(e.target.value) }} /> <br /><br /> <button type="submit">Submit</button> </form> </center> </div> );}export default Firestore; |
Output:
- Submitting the form after filling in the details
- The view of the data that is added to the store
Step 6: Create a basic User Interface for showing the store data. We are going to use the get() method for fetching the data from the store. The data is then looped through and used in the
Javascript
// Import Firestore databaseimport db from './firebase';import { useState } from 'react';import './read.css';const Read = () => { const [info, setInfo] = useState([]); // Start the fetch operation as soon as // the page loads window.addEventListener('load', () => { Fetchdata(); }); // Fetch the required data using the get() method const Fetchdata = () => { db.collection("data").get().then((querySnapshot) => { // Loop through the data and store // it in array to display querySnapshot.forEach(element => { var data = element.data(); setInfo(arr => [...arr, data]); }); }) } // Display the result on the page return ( <div> <center> <h2>Student Details</h2> </center> { info.map((data) => ( <Frame course={data.CourseEnrolled} name={data.Nane} age={data.Age} /> )) } </div> );}// Define how each display entry will be structuredconst Frame = ({ course, name, age }) => { console.log(course + " " + name + " " + age); return ( <center> <div className="div"> <p>NAME : {name}</p> <p>Age : {age}</p> <p>Course : {course}</p> </div> </center> );}export default Read; |
Output: In this example, four records that are present in the database are displayed in our application.
