React and Firestore Part 2

salehmubashar

Saleh Mubashar

Posted on March 14, 2023

React and Firestore Part 2

Hello guys!
In the previous tutorial, Part 1, we learned how to save and get data from Firestore, which is a cloud-hosted, Firebase NoSQL database. We also learned how to create and integrate a Firestore database to React.

In this part 2, we will learn how to update, delete and sort data.
You can read the detailed version of this article here:

React and Firestore: A complete tutorial - Part 2


Updating Documents in Firestore

In your React file, let's say App.js, import the database from the firebase.js file. Next, get the collection (we will call it "users") and check whether the document you want to update exists or not.

If it does exist, we can update it exists using the update method. We will provide this method an object that will contain the name attribute and its updated value.



import React from "react";
import db from "./firebase";
function App() {
const getData = async () => {
//get the user
const user = db.collection("users").doc("user1");
const doc = await user.get();
//check if user exists
if (doc.exists) {
//if user exists, update the name
await user.update({ username: "Mike" });
} else {
console.log("User does not exist!");
}
};
getData();

return <div className="app"></div>;
}
export default App;

Enter fullscreen mode Exit fullscreen mode




Deleting Documents in Firestore

Once again, we will check if the document exists and if it does, we will delete the document using the simple delete method.



if (doc.exists) {
//if user exists we delete it
await user.delete()
} else {
console.log("User does not exist!");
}

Enter fullscreen mode Exit fullscreen mode




Sorting

Detailed information on sorting which includes Getting a List of Documents and Sorting based on a specific attribute is discussed in the detailed article. Check it out:

React and Firestore: A complete tutorial - Part 2


Thanks for Reading!
Check out my personal blog too

💖 💪 🙅 🚩
salehmubashar
Saleh Mubashar

Posted on March 14, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related