How to perform fetch and send with Firestore using ReactJS ?

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 Firebase
firebase.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 database
import 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 structured
const 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.