Complete React Firebase CRUD Project | Firebase and Firestore With ReactJs Tutorial for Beginners

hey what's going on guys welcome back to another video so in this video we will explore the firestore database offered by firebase by building a small books management application used in the library we will see how we can set up the firebase configuration and perform the crud operation using the firestore database from our react application let me show you the demo that we are going to build in this video so this is the application that we are going to build we have a small form where we can add the book title book author and the status of the book as available or not available and then we have a button to add and update the book so let's try to add a book so i'm going to have a node.js as a book title then in the author i'm going to give the page and by default the book is available so what i'm going to do is i'm going to click on the not available and then i'm going to add the book so i'm going to click on the add so as soon as i add it the book is now added successfully in our firestore database and if we want to fetch the refreshed list so let me click here and i will click on the refresh list so it's going to give us the new list of the books that are available in the database so now let's go and let's check if i go to the fire store and here you will see that we have a collection of the books which has the documents and each document has an id on it and if we see then we have the fields which are added in the document as author status and title so right now we have two records in our collection so if i go back here and we can see the two records here now if we want to update an existing record so what i'm going to do is i'm going to click on this edit and when i click on the added the fields are automatically populated and i want to change the author name as malvia and the status of the book i want to change as available so i'm going to click on the available now i will click again on the add and update button and that is going to update our record in the firestore database now the book is updated successfully so if we want to fetch the updated list we just click on the refresh list and the list will get refreshed and similar way if we want to delete a records and we can just click on the delete button and the record will be deleted from our firestore database so i'm going to delete this as well and we are going to delete all the books and if we go to our database then we will see that we have a collection of the books but in that collection we don't have any documents so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys so i have already bootstrapped my react application and if you want to bootstrap your react application then you can use npx create react app and the name of your application let me give you a quick walkthrough of the code that i have at the moment so this is our application and if i expand this then we have the source folder and we have the public folder and if we go to the package.json then we have all the dependencies that i have already added to my project and the additional dependency which i have already installed in my project is the firebase because we are going to use the firestore database to do the crud operation and the other one is the react bootstrap which will help us to get the react bootstrap components for our ui so if you want to install the firebase then you can simply install the npm install firebase and you will be able to install the firebase in your project and for the react bootstrap i have added the npm install react bootstrap and the version of the bootstrap so this is what we have in our package.json now let's go to our source folder so if i go to the source folder then we have a components folder and inside the components what i have is i have two components add book.js and the other one is the book list so if i go to the add book then i have already created the jsx for the ad book so it's a simple a form which will help us to add and update the books into our firestore database and i'm running my application on the local development environment so if i go here then we see that i have already running my application using npm start so if we go to our browser then this is how the application looks like so this is what our component for the ad book is and the below one is the book list component which is showing a table of all the records so if we go back and in our app.js then in the app.js we simply have added uh some jsx and inside the jsx we are using the ad book and we are using the book list so i have only did the jsx part so that we don't waste much time on building the jsx and also i have deleted all the unwanted files that i don't want for this project and for the app.css i have added some default css so that i can use them for my jsx all right now if we go back here then here you will see that right now nothing is working so it's just a pure html so if i click on add and available nothing is going to happen if i click on add an update button it's not going to happen anything so right now there's nothing is happening here so what we need to do is first thing we have to set up a firebase project so that we can make use of the firestore database so if i go here to the firebase console the first thing you will do is you are going to click on the create a project and you are going to give a name as react i'm going to give a react crud all right so if i click on the continue and then here i'm going to keep it everything as default and then i'm going to click on the continue all right i'm going to select the location so for me the location will be india so let me select india and then i'm going to accept it and i'm just going to click on the create project and that is going to create our project all right so now our project is created you can see here that your new project is ready we are going to click on the continue button so if we click on the continue then we are going to see the dashboard of our project so this is the dashboard of our project and the next thing we need to do is we are going to use this project into our react web application so we are going to choose this web here so i'm going to click on the web and we need to provide a name to our application here so i'm going to name it as crud app and i'm just simply going to click on the register app so this is going to register our application all right so now our application is registered and now we can see that how we can connect our firebase application to our react application so the first thing we need to do is we need to install the firebase into our project and if we go back here and if we go to the packet json then we see that we have already installed the firebase in our project using npm install firebase all right and the next thing we need to do is we need to add this kind of a configuration into our react application so for that what i'm going to do is i'm just going to copy this and make sure that this configuration values will be different for you whenever you create your firebase application so i will go here and what i'm going to do here is so i'm going to create a new file so i'm going to create a new file into my source and i will name the file as buyer base config.js so this is going to contain the configuration so i'm going to paste everything here all right so i'm going to remove all the unwanted stuff which we don't want for the project i will delete this as well and i'm going to delete this and i'm going to delete this as well all right so we have added and now what we need to do is first we have the initialize of the application which is coming from the firebase app and for this project we don't need anything related to the analytics so i'm going to remove this as well and in the last we will see that we are initializing this app so we will have a constant of application which is going to have an initialize function and inside that function we are going to pass the firebase configuration which we have for our application and now what i'm going to do here is i'm going to import the get file stored because we are going to use the firestore database so here i'm going to have the get fire store all right and this will be coming from the fire base slash fire store so i'm going to add the fire store here all right and what i'm going to do here is i'm going to remove this we don't want this analytic stuff and i'm going to export a constant of db which will be a reference to our firestore database so i'm going to have a dp and i'm going to use this get firestore and inside this firestore i'm going to pass the app so i'm going to copy this and i'm going to add the app here all right so we are done with our configuration but now we haven't done anything with the firestore in our firebase console so let's go back here and if we go back to the console so i'm going to click on continue to console and here you will see that we have different tabs so in our previous video we used the authentication methods now in this one we are going to use the firestore database so i'm going to click on the firestore database all right and we have to create the database that we are going to use so i'm going to click on the create database we will use the database in the test mode because we are not making any application with the production ready so there is a difference in the configuration for the production mode and the test mode so if you see here then there are some set of rules being added so for the test mode it automatically allows you to read and write on this database but if we go to the production mode then you will see that allow read and write if false so if you are using the production mode then you have to go here and you have to change this configuration to true so that you are able to read and write from the database so for me i'm going to use the test mode so that i have the default settings and i don't want to make any changes in this configuration so i'm going to click here on the next and we need to select the location where we are so it's always advisable that you select the location where your customers are so that you get minimum latency in read and write operations so for me i am in the asia so i'm going to select the asia north east too and then i'm going to click on the enable so this is going to create a database instant in that particular region all right so my database instance is created and here you will see that we have different tabs so if i click on the rules then here you will see that we have the rules here and we can make the changes in the rules so by default this application is going to allow the read and write for the next 30 days so let's go back to our data so the first thing we need to do here is we need to create the collections since we are building a books management application our collection name will be books so if you are making some users application then your collection can be users if you are making a blog application then your collections can be post so for me the collection will be books so i'm going to give the name as books and you can treat this collection as if you're using an sql database then you give a name of your table so we will be having a books table there a similar way we are going to have a collection id here which is the books so i'm going to click here on the next and what we want is i want that whenever i create a new record or a new document i want my id to be auto generated so i'm going to click here as auto id so whenever i'm going to create a new record it is going to create a id automatically and what fields we are going to have so if i go back here so we are going to have the book title book author and the status so let's go here and let's add the fill so i'm going to add the field as title it will be a string and i'm going to add a book as node.js all right i'm going to add an another field which will be the author so let me add the author which is also going to be a string and the author of our book is the page malvia and the third one will be the status whether the book is available or not available so i'm going to add the field as status i will make this as small s and the status i'm going to give here as available all right then i'm going to click here save and this is going to create a document so if you see here then we are going to have a document and the fills in the document are author status and title so i have misspelled the status here so i'm going to delete this all right and i'm going to create a new fill which will be the status all right i'm going to give the status as available and i'm going to click on add all right so now we have one document in our firestore database and we already have the collection now let's use this collection into our react application so what i'm going to do is i will go back to my code and inside the code what i will do is i'm going to create a new folder which will be the services so i'm going to name it as services and inside the services i'm going to create a data layer which will have all the methods to do the current operation between the react application and the file store database so i'm going to create a new file inside this and i'm going to give it as book services services.js and here what i'm going to do here is first i'm going to import the db instance which i have created in my firebase config so in the firebase config we already have a db instance so let's go here and let's import that db instance so i'm going to have the db and this will be coming from the dot dot slash firebase config and the next thing we need to do is i'm going to import some firebase methods which will help us to connect the firestore with the react application so what i'm going to do is i'm going to import the collection so this is going to give me the collection so for us the collection is the books all right and then i'm going to have the get docs so this is going to give us all the documents from the firestore the next one is i'm going to have the get doc if we want the individual document from the firestore we can use this get doc method then we are going to have the add dock which will help us to add a new document to our collection then we are going to have the update dock similarly we are going to have the delete dock and in case if we want the document then we can use the dock all right and all this will be coming from the fire base so i'm going to add the firebase slash and i'm going to have the firestore so these are all the methods defined in our firestore so that we can make use of the current operation from the react application to the firestore and if you want to explore more about this then you can go to this link so i'm going to add the link in the description and here you will see that the based on your application you are using whether it's a web application or a mobile application you will see the demo code that how you can add delete update and read all the records from the file store so i'm going to add the link of this documentation in the description so that you can use it for the reference all right now let's go back and what we are going to do here is we are going to create a class so let me have a class and i am going to give the name of the class as book data service all right so we have the class and in the end i'm just going to export the instance of this book data service so i'm going to have the export default i'm going to use the new keyword and i'm going to have the book data service and then what we need to do here is that the first thing we need to have the collections the books collection reference so to get the books collection reference what we can do here is i'm going to create a constant and i'm going to name it as book collection ref so this is going to give me the reference of my collection which is the books so i'm going to use the collection so in the collection what we need to do is the first parameter to this collection is the firestore instance we have in our application so the firestore instance we have is the db so i'm going to have the db all right and then what is the name of your collection which you want as a reference so for us the collection name is the books so if we go here and we see that the name of our collection is the box so we are going to pass books here so i'm going to add the books all right so now we have the books collection reference and then now we can start creating methods here the first one i'm going to try is the add books so i'm going to write the ad books and this is going to be an arrow function and what it going to take here is it's going to take the new go so whenever we want to add a new book to our collection we are going to use this new book and what i will do here is and this is going to return us the add doc and we are going to pass the reference of our collection so the reference is book collection ref and then you will pass the new document which you want to add so i'm going to use here the new book all right so i have misspelled the return so let me change this so what we have done is we are going to take a new book and then we are going to pass this new book to our collection reference which we have taken it here so this is the books and you have to add a new book to this books collection all right similarly let's do the update so we are going to finish all the services first and then we just have to use those services into our application so for the other one is i'm going to use the update book and whenever i want to update a book what i have to do here is first i will need the id and i will need the updated book so i'm going to have the new book doc which is the updated or we can just write the updated book all right and whenever we want to do it first we need to check that whether the particular book exists in our collection or not so for that what i'm going to do here is i'm going to have the constant book doc so this is going to check that you have the document in your collection or not so i'm going to use the doc the first argument to this doc will be the firestore reference which we have which is the db so i'm going to add the db and the second argument will be the collection so the name of our collection is the books and the third argument will be the id so based on this id we are going to fetch the dock all right and now what we will have is we need to update this book dock with the updated books so i'm going to give here as return and i'm going to write the update doc and in the update doc we are going to add the existing document which is the book dog and we're going to have the updated doc which is the new document all right so we have done this for the update so i'm just going to copy this and i'm going to add it here now the next thing we will do is for the delete books so let me add the delete book and to add the delete book we only need the id of the book and then we are going to return the delete doc and when we need to delete the doc we first have to check that whether particular document exists or not so to check that what we can do here is we can fetch the same way we have fetched for the updated book so we will see this and if we find this then we are just going to delete this all right so we have done that and the next one we need to do is get all the books if we want to fetch all the list of the books in our firestore database then we can use the get all books and this will not take any argument and it's going to be an arrow function and we are going to return with the get docs and we just have to pass the reference of the books collection all right so i'm going to have the f here and the last one is if we want to get an individual document so if we want an individual book so whenever we are going to do an edit we first have to fetch the individual book so that we can populate the values so for that i'm going to have the get book and i'm going to pass the id so based on this id i want to get the book so i'm going to do a constant book doc which will be equals to the doc and in the doc we have to pass the fire store reference then we have to pass our collection name and then we pass the id all right and then we just return so let me return the get docs and i'm going to pass the book doc all right so now we have added all the methods to do the crud operation uh with the react and the fire store now it's just that how you are going to use this service layer into our application or into our components we have this and we are going to test this so we i see that there is a problem here uh we have a delete dock so if we go here then we have misspelled it so let me add the delete dock and for this we are just going to have the get docs so now these methods we will use it in our components so now let's go first and let's start doing the addition of the new books so what i will do here is i will go to my ad book component and the first thing here we need to do is we need to create the state variables so that we can bind those state variables with our form control so what i'm going to do here is i'm going to have a constant and then i'm going to have a title then we are going to have the set title and this is going to be use state all right and then i'm simply going to copy this for the other one so for the other one we are going to have the author so let me have the author and then i'm going to have the set author all right and now what we can do here is if we go to our form control we can actually add the value here so let me add the value so the value for this will be title and the value for this will be author all right and this form is completely based on the react bootstrap so if you go to the documentation you are going to find all the form elements as it is and you can just do a copy paste all right and the next thing we need to do is we need to write an on change so that we can set the value so i'm going to write an on change this is going to have an event i will have the arrow function and i'm going to write the set title and the title will be event dot target dot value i'm going to copy this and i'm going to add a very similar to the author as well and we're going to change this set title to set author all right so we have this and what we need to do is whenever we click on the button uh for the add or update we need to have a submit handler so i will go here in the form and then in the form we are going to add the on submit and we are going to use the on submit as handle submit all right so now let's write this handle submit so what i'm going to do here is i'm going to have the constant i'm going to have the handle so for meanwhile i will just close this all right i will have the handle i'm going to write the submit and this handle submit is going to be an arrow function all right and so this is going to have an event and i'm going to add a sync since this is going to be an async event whenever we make a add document or whenever we interact with the firestore it always returns a promise so i'm going to add a sync here and i'm going to write the event dot prevent default so that whenever we click on the submit it prevents our page to get refresh all right and i'm also going to take an another state variable so that we can have error messages so for that what i'm going to do is i'm going to have the constant i'm going to have the message and we are going to have the set message all right and this will be equals to the use state and here i'm going to have an object where i will have the error as false and then i'm going to have the message as empty so this is going to help us to show the error messages and the successful messages so what i want that initially my messages should be empty so that i'm going to give it as empty and now what we are going to do is we are going to make a check on the title and the author so if i have a title which is empty or our author which is also empty then in that case what we want is we need to set an error message so i'm going to have the set message and in the set message what i will do is i'm going to have the error as true and the message as all bills are mandatory all right and then i will just return from this function all right so we have done it for the empty and the error messages but if we don't have the empty title and the empty author then in that case what i'm going to do is i'm going to have a constant with a new book so we are going to have a new book which we want to add in our collection so for that what i'm going to do is i'm going to have the title as title all right and since we are using es6 so i'm going to give it as simple title the other field will be the author and we are going to have the status all right so this is our new record and if i go and let's do a console.log of this new book all right so i will go here i will do a inspect element i will click on the console and i will just clear the console now let me try ads node.js i'm going to give it as amit i'm going to give it and i'm going to click on the update so you will see that if i click on the update and let me zoom this then we see that we have the new book which we want to add into our firestore collection all right so now let's go back and now what we are going to do here is let me add a try statement all right and in the try statement what i will do here is i'm going to have the await and i will have the book data service so i have imported the book data service from here and we're going to use the book data service so let me add an import statement so i'm going to import the book data service and this will be coming from the dot dot slash services slash book services all right so we have the book data service and to this book data service what i'm going to do is i'm going to have the dot and it's going to give us the add books so i'm going to add the books and here i'm going to pass the new book all right and once the book is added i want to set the message as a book added successfully something like that so i'm going to have the message and to this message what i will do here is i'm going to have the error as false so this is not an error and i'm going to have the message as new book edit successfully and now what we need to do is if there is an error while adding a book we need to catch that error so i'm going to have the cache here that will going to have an error and i'm going to set the message again all right and in this case the error message will be true and our message will be error dot message all right and once we have added the book we need to clear the fields for the title and the author so what that what i'm going to do is i'm going to have the set title as empty and let's add the author as well and the set author will also be empty so now we have done this and now let's give a try and let's add a document so what i will do here is i'm going to go before that i will also like to add the alert so that we can see the error messages and the non error messages so what i will do here is i'm going to add an alert so if we go to the bootstrap documentation then i'm going to use this kind of an alert which can have an error message so what i will do here is let's go here and i want to display this error message whenever we have the message so i'm going to give this as optional dot message property on it so whenever we have this i want to display the alert message so i'm going to add the message and then i'm going to have the alert i'm going to have the variant and let's have a variant conditional variant so whenever i have the message and on that message if i have the error as true then in that case uh i'm going to have the variant as danger because that will be an error message but if that is not an error message then i'm going to have the variant as success because it's a success message and then i'm going to have a dismissable which is going to give me a cross icon so that whenever i can click on the cross icon i can close it and then i'm going to have a on close and then on whenever i click on the cross icon i'm just going to empty the message so that's why this alert message will be disabled so i'm going to have an arrow function and i'm going to have the set message as empty all right so this is nothing fancy it's a pure jsx and a bit of javascript logic i will close the tag and then here we need to display the message so i'm going to save it first so that we have the alignment properly and here what we message we need to display is i'm going to have the message and on the message if i have the msg message property all right so now let's go to the browser and let's test it so if i go here and if i click on the add update then we see that all fields are mandatory but we don't see any space here so let's add that space so what i'm going to do here is i'm going to remove this from here and i'm going to simply add it here so now we have the space properly so now let's give a try to add a record in our collection so what i'm going to do here is i'm going to select as javascript tutorial and i'm going to select it as amit and this book is available and then i'm going to click on the add and update so if i click on it then we should be able to add the record into our collection so now we see that the new book added successfully we can verify if we go to our fire store and here we see that this is our second record which is amit available and the javascript tutorial now we don't have any mechanism to fetch all the updated list or all the records from our firestore so if we go back here then we have to work on our book list so now let's go and let's work on this book list component and now let's go to our book list so i'm going to close this i'm going to close this as well we don't want this and we don't want this as well for now so let's go to the book list and in the book list what we need to do is we need to fetch all the new records from the firestore database so what i will do here is if we go here then i'm going to make use of a use effect so let me add the news effect and inside the use effect we are going to have an arrow function and we want this to be run only once so i'm going to add a empty array and now we need to make a call to our method which is the get docs so what i will do here is let's write a function of get books and we need to write the function for this get book so what i will do here is i'm going to have a constant get books and this is going to be an arrow function and we are going to use the async as we are using the async await because it's going to return a promise from the file store so i'm going to have a constant data and this data will be the await let's have the book data service so we have to import it so i'm going to go here i'm going to copy simply this and let's add it here and here if i use dot then we're going to have the get all books so this is going to give us all the books from the uh firestore database so what we are going to do is i'm going to create a state variable here so that i can have the books array so what i will do is i'm going to have a constant with books set books and this will be equals to the use state and we are going to have an empty array so if i go here and if i do a console.log and let's log the data so i'm going to log the data all right and misspell the console then we are going to see whatever the information we are getting from the firestore so let me change this to data dot docs all right and now if i go here and if i do a console log then we should be able to see something in the console log so you will see here that we have two arrays from which is coming from the fire store and we have two records that's why we have the two entries here so what we will do is we are going to take this data we will store it in this books array and then we are going to display it in our table so now what we are going to do here is that i am going to set the books with this documents or whatever the record we have get from the file store so i'm going to have the set books and inside the set box i'm going to have the data dot docs dot map on it and then i'm going to get the individual document and then i'm going to have the arrow function and inside the arrow function what i'm going to do is i'm going to do a spread operator of all the docs dot data and the other one will be the id i want the id so for that i'm going to have the id and i'm going to give here the doc dot id so i'm going to change this to doc all right so now we have set the books now we have all the books in the our books so let's add a pre statement here and let's see so what i'm going to do here is i'm going to have a pre and inside the pre what i will have i'm going to have the jason.stringify and then i'm going to have the books books i'm going to have the undefined and i'm going to have the two all right i will also remove these two and i will save it now let's go and let's see so if i go here if i close this then you will see that these are the records we have in our firestore database now we just need to loop through this and we need to display them in our table so let's go back here and what i will do here is so we have to make this dynamic so whatever the values we have in our books array we have to display them here so let's display them so what i will do is i'm going to have the books dot map on those books and that is going to give me an individual document and i'm also going to take the index i will have the arrow function and here we can actually return the jsx which we want so i'm going to have a return here and in the return jsx what i'm going to do here is i'm going to take this i'm going to cut it and i'm going to add it here and here i'm going to pass the key so let me add the key and the key will be doc dot id for the first one i'm going to have the index so let me add the index plus 1 since the index of our array will start from zero so i want my serial number of the record from one two three that's why i'm adding a plus one here we are going to add the dot dot title here we are going to add the dot dot author and here we are going to add the doc dot status so we have it and we will also write the on click function for the edit and the delete button so if i go here and what i'm going to do here is i'm going to add the on click and let me add the event and this event will have the get book id and i'm going to pass the doc dot id because whenever i want to edit a document i need the id of that document so i'm going to copy this i'm going to add it here as well and here i'm just going to change this to delete handler all right so now we need to write the get book id and the delete handler so if i go up and let's write the delete handler first because it's very easy to write the delete handler so what i will do here is i'm going to have a constant delete handler and this is going to be equal to an arrow function so let me write an arrow function and i'm going to have an async because it's going to return us a promise from the firestore database and what i will do here is i'm going to have the await book data service dot delete so that is going to delete our book but we need to pass an id so what i will do is i will have the id here and i'm going to pass the same id here so let me add the id here and what i will do is as soon as i delete the id i want to refresh my list so i'm going to call the get box so now let's go and let's test it so if i go here and if i refresh it then we are having that get book id is not defined so for now let's let's remove this uh we will use it later on so i'm going to just comment this out so that it works all right and we will also remove this pre so that we can see properly so i'm going to comment this out as well and now we see that we have two records which is the node.js and javascript tutorial and both these are coming from the firestore database so if we go here then we see the we have two records and we can see here we also have the two records now what i'm going to do here is i'm going to create a button here which is going to refresh the list whenever we add a new record so let's go back and let's add a button so i'm going to come here i'm going to write a div with a class name all right and i'm going to give as margin bottom 2 and then inside that i'm going to have a button with a variant and i'm going to give the variant as dark edit and then i'm going to have the on click so let me have the on click and whenever i want to click on this refresh button i need to call the get books so i'm going to have the get books so let me add the get books here all right i'm going to close this button and i'm going to name it as refresh list so we have made a mistake here so this button should be capital because it's a bootstrap component and if we go here then we see that we have a list now let's give a try and let's do a add a new record so i'm going to add a php complete guide 3 i'm going to name it as the nikkei the book is not available and i'm going to click on add so we see that now the new book is added successfully and we need to refresh the updated list so i'm going to click on the refresh list and we're going to get the new book so now our create a new record is working and also get all the record is working now let's give a try to the delete because we have already returned the delete functionality so if i click on this delete then we should be able to delete so we see that now the record is deleted and we get the refresh updated list so if i delete again then we are able to delete it again all right and if we go here then we see that the record is also getting deleted from our collection in the firestore database now the only thing we need to do here is we have to write the edit because right now we don't have the edit functionality so what we want is whenever i click on the edit i need to fetch the data first and then i need to pass that data to my ad component so that i can populate the values so what i can do here is let's go back and here what we will do here is if we go to our app component then inside the app component i'm going to take a state variable of the book id so what i'm going to do here is i'm going to have a constant i'm going to have the book id and then i'm going to have the set book id all right and this will be equals to the use state and i'm going to have the empty state and what i want is whenever i click on the edit i need the id in my app component so i'm going to pass the drop in the book list so here i'm going to have the get book id and this will be equals to the get book id handler all right i need to implement the get book id handler so what i'm going to do here is let's implement this so i will come here i'm going to write a constant get book id handler which is going to give me an id all right and whenever i get the id what i'm going to do is i'm going to set the id as book id and i will have the id here and i will also do a console log of this id so that we see that we are getting a proper id or not so i'm going to have a console log and the id of document to be edited so i'm going to have the id here so what we need to do is now we have passed this prop let's use this prop in our book list so i will go here in the book list and let's destructure the prop first so i'm going to structure the pop and add the get book id now we can use this and we can have a on click here now now uncomment this out and now let's see that if we click on the uh edit button are we able to get the id in our app component or not so i will go here i will refresh it but i'm getting a use date not defined so i'm going to go to my app js and here if you see that let's import the use state so i'm going to have the use state and that use state will be coming from the react so we have this and now what we need to do is whenever i click on the edit button i need the id to be in my app component so if i go to the console and let's go here i'm going to delete this and i will clear the console and if i click on the edit then i see the id of the document to be edited and i get the id now i need to pass this id to my ad book component so that i can fetch the data and i can populate it so what i'm going to do here is let's go back here and let's pass the data with the prop so i'm going to go here i will come here and i'm going to pass the id all right and this id will be equals to the book id and along with this i'm also going to pass the set book id and that will be equals to the set book id so now i have passed the props now we can use these prop in our ad book component so let's go to the ad book component and here i'm first going to destructure the props so let me destructure the prop i will have the id and i'm going to have the set book id and now what we need to do is first i'm going to run a use effect to check that whether the id value is defined or undefined because what we are going to see here is that if we have the id value then in that case we want this button to work as update a record but if the id is undefined then in that case we want this button to work as a add button so let's go down and i'm going to import the use effect and then i'm going to write a use effect in the end so i will have the use effect and then i'm going to have an arrow function and i want to run this use effect whenever the value of the id changes so i'm going to add the id here and here i'm going to make a check that if my id so let me have the id is not equals to undefined that means my id is not equal to the undefined and if my id is not equals to empty because whenever we are going to edit in those cases my id should be my id will not be undefined and my id will not be empty so that in that case what i will do is i'm going to have an edit handler and let me do a console log here so that you can see that what cases the id will be undefined and empty so i'm going to have the the id here is id i'm going to comment this out all right so now let's go here and let's refresh the page i'm going to do an inspect element and i'm going to do a console log here so now you will see that if i click on the edit then in that case uh in the ad book i have the id so that means i have to update the record now but what if i just do a let's add a new values so what i'm going to do here is i'm going to refresh it and if i refresh it then here you will see that the id here is empty so if i want to add a new record so let me add a php and i'm going to add a medube let's click on the add so in this case a new record is added i will just refresh the list all right and now you will see that if i click on the edit so now in this case i have the id now what i will do is i will first fetch the record and then i will populate the values here so let's go back and here i'm going to have the edit handler and in the edit handler what we need to do is first we need to fetch the data from the firestore database so i'm going to have a constant i'm going to have the edit handler and this edit handler will have a arrow function i'm going to change this to i'm going to add a sync here as this is going to return a promise and here first i'm going to do a set message as empty and then what i will do is i'm going to try and i will have first i will fetch the document from the firestore so that i want to populate the values so i'm going to have the constant i will have a doc snap and i'm going to write an await here all right i will have the book data service and then i'm going to have the get book i have to pass the id because based on the id we are going to fetch the book and now what we will do here is if i get the dot snap then i can set the values to the title so i'm going to have set title and this will be the doc snap dot data and on this data i have the title so that is going to fetch the title all right i'm going to copy this and i'm going to add it so this will now change to author so let me have the author this will now change to author this is going to change to status so let me change this to status and this will become status and if this operation fails then in that case i'm going to catch the error so let me have the error and here what i'm going to do here is i'm going to set the message and i'm going to have the error and the value of the error will be true and the message will be whatever the error message i have message so now we have fetched the record from the firestore database now we have got the value we just need to populate the value into our form so this is how it's going to populate the value in the form so if we go back and if we test it and also let me do a console log of the docsnap so i'm going to do a console.log the record is and i'm going to have the docsnap dot data now let's go and let's test it so if i go here if i refresh my page then we have missed the comma so let me add the comma here all right now if i click on the edit then you will see that we are populating the values to edit the document and we also see the record which is to be edited is this one which we are getting it from the docsnap.data so we are now able to edit it now if i click on this button in this case it should not add a record but it should update a record so if we go here and if we see that this is our submit handler and inside the submit handler what we will do is we are going to define the condition which is that if the id is undefined and if the id is not empty that means i want to update my record so what i will do here is i will have if my id is not equals to undefined and my id is not equals to empty then in that case what i want to do i want to update my record otherwise i want to create a new record so what i will do here is i'm going to copy this and then let's add it here and in this case what we will do here is we will change this to updated successfully and here instead of add dot we are going to call the update book update book and we have to pass the id to update the book so we have added this and what we need to do is as soon as we update the record we need to empty the id otherwise every time we are going to get the value in the id so here what i will do is i am going to set the book id to be empty all right so now we have done the update part also uh it's bit tricky we can do this in a multiple ways but i'm not using the context api just to avoid a lot of complexity in the project that's why we have used this approach all right so now let's go back and now let's test it so what i'm going to do here is we will change this to not available and then i'm going to click on the update and you see that the update is successfully now let's refresh it so if i refresh the page then you will see the value is changed all right so now our crud operations are working fine let's give a try on all the functionalities so i'm going to close this and first let's create a new record so the new record will be my react firebase tutorial and the author will be the page malvia and i'm going to click on the available as the tutorial will be available let's click on the ad now you will see that the new book added successfully so if i click on the refresh list then we see that this is our new record if we go to our firebase console then we will see that we have three records and we are able to fetch all the three records now let's give a try and let's update this so i'm going to click on the edit and as soon as i click on the edit you will see that we have the values populated so i'm going to have react firebase crud tutorial and now i'm going to change this to not available and now let's click on the button so if i click on the button now in this case it's going to update the record so if i click on it then update it successfully let's refresh the list and you will see that react firebase crud tutorial and the value changes automatically let's give a try on the delete so if i click on it it's going to delete the record and it's going to delete the record and it's going to delete the record so this is how easy it is and you usually use the firebase if you are a front-end developer and you don't know about creating the apis and the backend system then you can make use of the firestore database so that's all i have in this video i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter for latest updates i'm going to add the link of the code in the description so that you can download it and play around it and please help me to grow the channel by hitting the like button thank you thanks for watching

Channel: Dipesh Malvia

Views: 49,259

Keywords: firebase, firestore, firebase tutorial, firebase developers, firebase 9, firebase 9.0, react firebase crud, react firebase tutorial, react firebase, firebase crud, react firestore crud, react, reactjs tutorial, firebase react project, react crud with firebase react crud with firebase, delete operation in react firebase delete operation in react firebase, react beginner projects, react js crud operation

Id: cXWDQhzC3do

Length: 48min 37sec (2917 seconds)

Published: Thu Jan 20 2022