React with Firebase CRUD Operations

it's a beauty welcome to go to fiction today we are going to implement five base quote operations inside a reactor application before getting into this topic I would like to thank for your paypal donations for my previous folks in order to make more helpful and quality tutorials like this you can also support me through PayPal donation I have given the link in video description and inside the first comment of the video I have also written a blog post on this same topic I have given the link in video description you can gap code from there as well so without further ado let get started with this topic first before we have to create a react application for that you can use this shortcut instead of this folder pod here I will just replace that with C and D then hit enter so here we have opened command prompt from the same folder directory here in order to create a react application you can execute this command + px' create react app and then you can provide the name of the app it would be firebase credit now it's gonna take a while to complete this so please be patient so here we have successfully created the app as a result of that you can see the new folder with the project name firebase credit let's now we get inside that folder here now we have to open this project for the inside we use code editor so that you can do this called space period symbol hit end up so here we have the brand new react application now let's run this application for their go to terminal the new terminal here and execute this command NPM start so this is how the fresh react application looks like for this application we'll be using bootstrap so first of all let's graph corresponding start sheet and JavaScript reference into this application so go to this website get bootstrap calm then click on this get started here let's copy this sort of friends you can paste that inside this head tag here now let's copy the corresponding javascript file also and we can paste that just before the body dag here for this application we'll be using four numbers some icons so let's graph corresponding CDN so formed over some CDN I will follow this link here from CDN Jas comm then from this CSS tab here let's copy this minify CSS set of friends and let's paste that along with this bootstraps child sheet here in this tutorial we'll be implementing five a square operations with react for that we'll be using contact informations like full name email address mobile and address so first of all let's create the firebase project for that first of all go to this website here control dot fire based on google.com then click on this add project here name your project here of limit as react correct click on continue I will disable Google Analytics create the project click on continue so here we are inside the project overview all the dashboard we are going to use this firebase project for database purpose so first of all let's create a database so click on this database option here for this application we'll be using real time database so click on this create database option here now select this test mode here so that we can perform read and write operation without authentication click on enable so here we have our real-time database will be storing contact informations under a known contacts we will discuss that later now back to project overview here now we have to add connection details for this project into our reactant application for that you can select this option for web we have to provide a nickname here I will provide the same name react cred register we app so here we have the configuration object and then we have to call this initialize function with the configuration here so let me copy these course from here then back to the application now let's create a new file inside this SSD folder here five days four days and then we can just paste the code here as mentioned inside this guide here we also have to include this script reference here but inside our application will be using NPM package firebase okay so back to the application here let's install because owning NPM package and p.m. I for install as for save firebase hit and it's gonna take a while so please be patient so here we have completed with the package installation firebase in order to make use of this function called here we have to import the package firebase here so let's add the corresponding import statement from firebase package we have to import all with this alias firebase now inside this application we have two important components so first of all let's create the component folder here components first of all we have the parent component contacts and then we have the child component contact form inside this application for component creation will be using react hooks in order to create a react hook component you can use this react snippet itself see stateless functional component hit enter name of this component will be contact for now just keep this return statement as it is now let's define this contact form component here SFC contact for the default view of the application here default component here app dot J's instead of this htmls here we'll be using bootstrap grid system so first of all we will have a deal with a class inside that we can use these columns class name is equal to call em d8 and then we have an offset of one column so offset MD one inside this day we can show the parent component contacts so then let's add the tag contacts here inside this auto solution just select these options so that corresponding import statement will be added at the top now back to the parent component contacts here first of all we can show a title for this application for that I will be using bootstrap Jumbotron element so let me copy this Jumbotron from here and then let's paste that here we don't need this banner here I will name this app as something contact register just beneath that we can use the bootstrap grid system like this div class name row and here is the first column called md5 inside that we can show the phone component where we have to design the form for contact informations so contact form select this option corresponding import statement should be added at the top okay sorry inside these components we forgot to import react so let's import that here import statement from react we have to import react now let me copy this import statement and place that inside this contact form here now back to this parent component so here we have five corns for the contact form the rest of these seven columns will be used for listing inserted contact informations so class name is equal to call MD 7 for now we'll just display this deal saying list of contacts now you can see a red squiggly line here saying JSS expression must have one parent element currently inside this returns we have to parent gives one for this Jumbotron here and one for this woodshop grid system row as per their sex index inside the certain statement it will only allow one parent element in order to fix this issue we just need to enclose these two divs with react fragment so we can do this react don't fragment now let me move this end tag here in short you can do this you can just avoid this react fragment here and here that's it inside the return statement there should be only one parent element here we had two divs as outer element you know to fix that we have added this react fragment now inside this child component contact form we have to design a form for now we'll just return this day saying display for now let me save this and back to the application here so that's it so here we have the title saying contact to the store and inside the first bootstrap column we have to design a form and inserted of course should be listed inside the second column of the bootstrap now we have to make few more changes here let me align this text in center so back to the parent component here and then let's add this class text - sender also we have to align this whole container in center so that inside Abdur J is we have to use offset with two columns now let's look how to design the form inside this child component here as we have mentioned for this react components will be using react whose so let's import corresponding functions here use state and use effect basically react two components are functional component with these functions use state and use effect we can have additional features inside this create two components for example inside this application we are going to implement quad operations informations so first of all let me define a constant variable here initial field values it is an object it contains initial values for each fields first of all we have full name as empty string and then we have mobile email and address now let's talk about this use state function here with this use state function we can define state variable for a component for example we can define a state variable like this Wow and then we here we have at Apple state variable for example X and here we have another function set X and we just need to call this function use state here so here we have this state variable X and using this function set X we can change values of this variable here and inside this function call we can set the default value of this state variable X if you want to change value of this object we just need to call the function set x will be new value something 607 that's it in the same way we are going to define a state variable here to design before I will limit as values and corresponding function will be set values I will initialize this values sorry I will initialize this state variable with this object initial field values initial field values now let's define a form inside this component so first of all we have a form in order to prevent from showing previously posted form datas you can set this property autocomplete as off now first of all we have to show an input control for full names so I do with class name form glue along with this full name input control I want to show a 400 some icon you can see this similar design inside the documentation here using input group you will have an input control before that we will have a phone our some icon so in order to do that you can add or no clause here input group to show the phone over some icon we can add this deal with the class name input group prepend inside that we can have another deal with this class name input text inside that we can have a phone over some icon so I tagged with this class name fast then for - user then outside this input group prepend and inside this input group we can have the input control so input first of all we have to add the bootstrap class here so class name is equal to form control and let's say this placeholder has full name here in order to identify each input control inside this form we have to pass a name attribute here I will set it as full name value of this input control can be set to these values state property here okay inside that we will have these properties for each control so let's add that here values side then we have full name now let me save this and back to the application here so here we have the input control for full name now we have to show input control for mobile and email address in a single line each of these controls will take six columns from bootstrap surface so for we can add this outer div here for row since we have to devise these controls into two house we have to add this class four row now we can just copy this div for full name here and pacing here for mobile and email address okay we can assign this class called md6 for these two divs called and d6 let me copy this paste in here for email address also now let's update rest of the attributes here for mobile we'll be using a different phone our some icon for mobile alt placeholder will be mobile name should be exactly similar to this property that we have inside this values state property here so so mobile values dot mobile then after that we have email address corresponding icon class will be for envelope placeholder email name is equal to email value stored email back to the application that's it so here we have an extra close tag let me save this back to the application that's it now if you inspect this application you could see this error you provided a value props to a field without on cheats handler since we have set values for these input controls from state variable values we have to add on change even also currently if you end the values into these input controls nothing will happen in order to populate these input controls we have to handle this on change event so let's add the event here first of all I will add that for this input control on change is equal to it will be defining a new function called handle input change now let's define this function here constant handle input change for this function we have only one single parameter which is the default event parameter for any JavaScript event inside this function first of all we have to retrieve the current value of the input control and corresponding name attribute value inside this default event parameter e will have an object door target it contains all of the information regarding that input control from which this event is triggered so from that we have to retrieve name and value of the control for that you can use this destructive syntax we have to retrieve name and value okay so inside this variable we will have name which is full name for this control here current value inside this control will be there inside this property value now we have to update this full name inside this state variable values that you can call the function set values if this state variable is a string or an integer we just need to pass the new value right away something 45 or 50 in this case we have an object so we just need to update the corresponding property full name here for that we can do this we will pass an object first before we will use the existing values as it is so we can use this separator operator here so values and then we just need to update this property full name full name is equal to new value which is still inside this property value so this function will handle unchanged even for full name control only in order to use this function generally for in input control instead of hard-coding full name here we can use this syntax we just need to enclose this name property with square brackets so that corresponding value property will be assigned with this value here since we have set name attribute of any input control inside this form externally similar to these properties inside this state variable here so corresponding property will be updated now let's wire up same function for rest of the input control on change event let me copy this and paste in for mobile and email address have you forgot to add one more input control for address so let's add that here the class name is equal to form group inside that we can have this text area now let me copy these attributes from email and pacing here for address placeholder will be at this name will be address let me copy these attributes also values dot address finally let's add a submit button so I do with class name phone control input type is equal to submit value is equal to save class name is equal to TM BT and primary in order to alert this button we can add this class BTN block so instead of form control we have to use from group let me save this back to the application I think we have added these address and submit button inside this forum bro let move that outside back to the application that's it since we have implemented on change even we can add values inside these input controls corresponding values will be updated into respective properties inside state object values now let's look how we can submit this form so that we can insert a new document into the firebase DB so that we have to add the on submit event on submit it will handle that inside this function handle form submit let's define this function here it has a single parameter event in order to prevent default procedures for submitting a form like refreshing of the page we can call this function prevent default now we get insert a new record containing details of these input controls here in to firebase DB all of the firebase related operations can be done inside this parent component here so I'll be defining a function here constant add or edit it is a function with single parameter object you can define this function in a bit for now we are inside the parent component we have to call this function add or edit inside this child component after this function call here for that we can do this we'll just pass that here like this add or edit is equal to add or edit function okay now we can access this function inside the child can point through its props now we can add props through this process parameter you can access that as pass from parent components now we just need to do this props dot add or edit into this function we can pass values of these input controls here that is saved inside this state values here so we can pass values here now let's complete this function add or edit here before defining this function inside this firebase DOJ's function we have initialized this tab with the configuration so here we have called this function initialized app with the configuration it will return an object now let me save that object in app variable Phi DB we need this object to make reference into our 5 base DB and finally from this file we are going to export the reference for that we can do this v DB dot that our base function can be called and finally we need to call this reference so from this file we have exported the database reference now we can import this file inside this parent component here so that we can to create operations inside the DB so important from flat base dot JS file we have to import this exporter reference as v base TB here v base DB now inside this ad already function let's look how we can insert a new record for that we can do this v base dot chanchan can be called and here we have to pass the path or we node into which we want to insert the document so contacts there will be a new node created currently inside the firebase TB there is no such node with this name contacts to insert a new record under this node we can call this function push and we just need to pass the object here obj it contains all of the information from our form controls and here we can pass a callback function like this if there is an error we can print that inside the console so we can do this console dot log error let me save all of these modifications now let's try to insert a new record full name Fiona green mobile number/email Fiona Gmail calm and then some address submit reform now let's inspect whether we have any error or not now let's look whether it is inserted into the five based TB or not currently we are inside the project overview click on database here boom that's it so under this contacts node here you could see a new document here address email full name and mobile for each of the documents under this context note here we can identify all of them uniquely with this key here now let's look how we can list all of the documents under this contacts node inside this second half here now inside this component when would be the proper time to retrieve all of the records from our firebase dB if we were using class-based components we may do that inside component did mount but in case of react hooks we have to do something different first of all let's import corresponding functions here like we have done inside this child component use state and use effect let me copy this and paste in here as you know we can define component state property using this function use D for example we can define a state property X with the corresponding set function set X is equal to use state let it be 0 initially and with this user pack function we can define side effects or callback functions when there is a change inside this value use effect function can be called basically it has a callback function like this as a second parameter we can have this array inside that we can have this state variable X if there is any change inside the state variable X this callback function will be invoked so this is the main use of use effect function if you want an alternative like component get mount as a second parameter we just need to pass an empty array like this so this is similar to component deep mount ok inside this callback function here we can retrieve all of the records from our five based DB here under this North contacts for that we can do this first of all let me copy this reference and then we just need to subscribe to that using this function on whenever there is a change of value inside this node contacts we can define a callback function like this snapshot this callback function will be invoked whenever insert update or delete operation occurs under this contacts node now we can access all of the documents under this contacts node like this we just need to call the function well from snapshot now let's define a component state property to store all of the documents I will define the state variable contact objects now let's rename the set function accordingly set contact objects initially it would be an empty object so this function will retain a collection of objects for your convenience if you want you can convert that into an array of objects in order to avoid the extra work I'm going to use as it is so first of all we will check whether the list is null or not if it is not null we have to update the state variable so that we can call this function set contacts objects inside that we can use this separator and let's call the same function here now inside the second half here we can render all of the objects inside a tab class name is equal to tab then double borderless then tab will stripped inside that we can have this T head class name is equal to T head light now let's add a TR element first of all we have full name now let me to placate these three times you can use this shortcut ctrl C control V this is for mobile email and inside the last column we can have buttons for delete and edit operations and here we have the tea body inside the tea body we have to have t.i element for each of the objects inside this collection contact objects so we can do that inside this pair of curly brace if we were using an array we can directly call the map function to loop through the records but in case of collection first of all we have to loop through the keys of the collection so we can call this object dot keys function beside that we can pass the collection contact objects so this function object keys retains all of the keys from the object collection so basically the collection includes documents like this for each of the documents key of the object will be this unique identifier so from this keys function as we have mentioned it will retain an array so now we can call this map function we have a single parameter key or you can call ID inside this function we just need to retain a TR element containing TD cell for each of the objects so first of all we have full names or TD now let's add a pair of curly brace now we have to access the particular document from this collection with this ID so that we can do this contact objects here we can pass the ID dot full name now let me copy this and pasting here two times this is for mobile and finally we have email and finally we need a TD cell for action buttons edit and delete we can do that later for now we'll keep it as empty now let me save this back to the application for all this you could see a small delay there because we are fetching data from this database collection here at the same time you could see an hour here each child in a list should have a unique EEPROM meaning when we are trying to render a list of a course like this here we are trying to render a list of TR elements in that case the outer element should have an attribute key and here we have to pass a unique value for each of your course in this case we can directly pass this ID now let me save this back to the app that's it now error is gone now let's look how we can implement update or edit operation for that first before we can add an edit icon for each of your course here inside this last TD cell we can add an angle element let's apply few classes BTN then BTN - primary inside that we have to show a phone or some icon then I will add this hijack class name is equal to force then for pencil art now let me copy this and paste in here for delete operation instead of this class we have to use text primary and that of delete button here text danger let's change this phone our some class also now back to the application here you can see the icons for edit and delete operation now if you so want to update our code he can click on this pencil icon here corresponding document details should be populated inside these respective form controls here in order to do that inside this pattern component I am going to create a new state variable to hold current ID of the record using this property we can identify which record is opened for edit operation so let's define the variable here current ID and set current ID is equal to use state function can be called inside that we can have this default value empty string now inside this button even we can update selectively a cold ideal for that let's add the unclick even here on click is equal to we just need to update this state variable current ID that we can do inside this onclick event in line so first of all let me define an anonymous function here now we can call this function set current ID into that we can pass the ID of this selected document that can be accessed from this parameter ID corresponding ID will be saved into the state variable current ID at the same time we have to populate these input controls with respective informations in order to populate selector record details inside this form we have to pass the selected ID which is the state variable current ID and the list of these objects so let's pass that here instead of passing this like an attribute we can do this okay first of all be using this separator and then inside that we can have this object add or edit and into that we are going to pass add or edit since this is an object we can use this short syntax both key and value are same so we just need to pass add or edit here along with that we have to pass the current ID and then finally contact objects now inside the child component we can access all of those parent properties through these props here like we have accessed this add or edit we have to populate this form when you say changes parent component state property Kevin ID so I'm going to call the function use effect here like we have used use effect inside the parent component so we can call the function use effect here use effect first of all we will have this callback function and it should be called whenever the parent component state property current ID is changed or contact of is changed okay so this function will be invoked whenever there is a change inside these estate properties current IP and contact objects first of all we will have this if course inside that we can check props dot current ID if it is equal to an empty string if current ID is empty string meaning there is no item selected for edit operation in that case we have to reset this values state property here so we can do this set values inside that we just need to pass this initial field values here for this form reset operation we just need to set the current IDs and T string from parent component if there is a value inside the current ID we have to populate correspondent record it is inside three values here so let me copy this and pissing here here we have to populate correspond the code details from this contact objects so let me copy this and paste in here inside this collection we will have a record with this current ID so corresponding ID details will be populated inside this state variable here and thereby in this form will be populated now let me save this and back to the application here now click on edit icon here boom so here we have populated corresponding it is into this form for update operation I want to change this button submit button text to update so let's look how we can do that conditionally here we have the submit button since we are going to handle this text inside JavaScript code you can use this curly brace pair here we will check the value of current ID so prop stored current ID if it is equal to empty string we can have this text save otherwise it will be update let's check that here that's it now after making requests in just inside this form user can submit this form for update operation we have already implemented in that operation inside this form submit event now we have to implement update operation also so back to the form submit event here here we have called the parent function add or edit so first of all we have to check the current ID if current ID is equal to empty string we can do the insert operation as we have done here inside this else part we have to do the update operation now let me copy this and paste in here for update operation instead of push function we have to call the set function and then we have to concatenate these paths here okay instead of single chords you can use backticks so that we can use this string interpolation here we just need to do this dollar symbol then a pair of curly brace inside there we can have this current ID we have to update the details inside this path with this object if there is any error we'll print that inside the console otherwise we have to reset the form for that you just need to set the current ID as not set current ID to empty string not not we have to do the same inside this insert operation also as we have defined this user fact function inside this child component here whenever there is a change of value inside current ID or contact object collection this callback function will be called based on current ID we will populate before if it is empty string we will reset the form otherwise we will populate because phone and record details now back to the application let's try to update this record here update boom that's it if we make any changes from this application side it will be synchronized inside this our node here if there is any change then inside this database directly it will be updated inside this application also now let's check that with this edit button here so here we have updated address and this same woman if any user make changes inside this database directly or using other applications these same changes can be seen inside this application also so that's all about insert an update operation now let's look how we can implement delete operation I'm going to add unpaid event for this delete button here on click we call this function on delete into this function we have to pass the ID so key when we call a function by passing a parameter we have to call that inside another function like we have done here so let's enclose this function call inside another anonymous function here so that's it so let's define this function here on delete with this parameter key for delete operation first of all we have to confirm this operation so you can call this function can form inside that we can ask this query are you sure to delete this but chord if you sir confirm this operation we can go for delete operation for that I will be just copying this function call for update operation instead of this set function we just need to call remove here we have passed in your path which is to be deleted so we don't need this first object parameter here and here is the callback function so reshape we have another instead of ID we have key let me save this back to the application here unexpected use of confor we have to call this function from window okay window don't confirm now let me insert in your code save so here we have the corresponding record now let's update this update that's it now let's delete this record are you sure to delete this record confirm the operation something went wrong let's inspect that here sorry instead of current ID we have to pass key here saved back to the application we have made one major mistake previously we have called the remove function instead of key we were using our current ID at that time it was an empty string so we have just deleted the Ender node contacts okay that we can see here we can't see the no anymore now let's insert the record again save delete this record click on OK you can see that we have deleted the record from this flat base here but we have not refreshed this table here it's because of this subscription here if the value is not null then only we have updated this state collection of objects contact objects here inside this else part we have to update that with empty object so let me copy this and teaching that here now it should work even if there is no record inside the collection this tab will be refreshed after deleting the final record also so that's it gasps we have completed with five basic square operations inside react I have also written a blog post on the same topic you can grab quote from there as well if you found this video helpful Pistons of this video and for more awesome videos like this please subscribe to this channel Cod affection please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 83,514

Keywords: CodAffection, update document in firebase with react, delete operation in react firebase delete operation in react firebase, how to insert data into firebase how to insert data into firebase, react crud with firebase react crud with firebase, react firebase crud, react firebase hook react firebase hook

Id: pI4438IHBYY

Length: 44min 22sec (2662 seconds)

Published: Mon Apr 20 2020