Read, Write, Update & Delete Data in Firebase using Table | React JS

what's up youtube and welcome to this react tutorial in this video we will perform crud operations on firebase using bootstrap table so let us begin so the database structure looks like this we have a customer folder and inside it we have bunch of customers each with the information of the full name phone number and the date of birth and this video is actually a sequel to the previous video where we created this component real-time data where we retrieved data from the customer folder into a bootstrap table so now in this video we will add the functionality of credit operations to this table first we need some import statements so firebase config and index so firebase config is a component that we also created in the previous video where we store all of the configuration now export now first we will create the constructor which will take props here props is a necessity because we will get the data from the real-time data component so super props which will make the data available in the entire component and then this dot state which will consist of a mod there will be two mods one for the creation of data and one for the editing of data now is open this property will take care of the model then the record object which will store the information of a customer so username will come from props dot username and the full name i will copy these property names because this should be ex these should be exactly the same so props dot record dot full name and you will see in a moment that why i am keeping the keeping the name of the property same then there will be four more properties so these are all the properties which we will keep inside the state now we also need the firebase configuration so we will create a constant name db and use the start firebase function now we have to make changes in the real-time data component and here we will import the cut panel and i will also create a variable unique number which will be equals to zero and this unique number will be used as a key when mapping this a table data and plus plus so each time the number is increment to 1. this is an absolutely necessary step because previously we were just putting text data inside these table cells but now we are putting a component inside the td so we need a separate variable for assigning the keys for each of the records now the credit panel and this will take a username so raw dot key is the username in our case and then the record which will take draw dot data so uh this username key is the name of the user which in this case is developer so now let us test this out in componented mount i will print this dot state dot record and we also need to create a render function or else this will give an error so render and let us return this empty fragment so all of the records are here and they are getting successfully passed to the credit panel component so everything is fine we also have to add a header here named as control panel and now inside the credit panels we will render some buttons for the each of the record to show so we will render we will render two buttons in this render method so button and its variant is gonna be primary and i am adding a class name ms 2 which stands for margin star 2 and this will say add new record and there will be another button for edit record it's not showing anything so it's giving this strange error it's maybe because of the yes this should be react bootstrap so the wrong library was attached so the table should look look like this so we have a add an edit button with all of the records you can put a generic add new record button at the top or at the bottom but i like this configuration now we have to create a model which will have the show property which is responsible for its visibility so it's showing or not so this dot state dot is open so we are attaching the is open state and then inside it a model header the model titan and this will be decided on the basis of whether this dot state dot mod is equal equals to add if it equals to add then we will say add new record otherwise we will say edit record so these are called ternary operators uh here we give a condition and then we give two options uh which are if and else so if this condition is true then add new record otherwise we will assign edit record there will be a button this this would be the x button and now inside the model body we will have all the input groups so input group dot text equals to user name and we will create a form control which is a text box and it will have the attributes value which we will bind to the this dot state mod user name and then another property on change and this will take care of the one way binding that the react supports so e which is the event event object so it will set the state of the mod username to e dot target dot value so this is the most direct way to include the one way binding that the react supports now it will get disabled if this condition is true so this dot state dot mod is not equals to add then it is then it will get disabled so when editing a record the user cannot change the username now let me copy this input group we don't need this these disabled properties and the second will be full name and in this date of birth form control i will add another attribute type which will be equals to date and then there will be the footer so model dot footer and it will hold two buttons so i will copy the button from above actually three buttons and primary other will be success and the third one will be danger let me create a function for opening and closing the model open model and this will set the is open property to true same with the close model and now let me assign these properties to the buttons so these these are the buttons so on click this dot open model and we will pass add and in this case we will pass the edit so this will take an argument mode on clicking the cross button it will activate the this dot now let us modify the open model function so inside here we will assign the mode now let us call this option and if the option equal equals to add then will assign the mode this option and all of these mods will be empty so because we are adding new record all of these mod will be empty otherwise else if the option equal equals to edit then and i will create a new variable rec and this will take the this dot state dot record and then date of birth so now let us test the model it's showing nothing so there would be an error let us see so there is an error at close model oh i have assigned it the wrong way we cannot just call the function inside onclick event we have to assign our function that calls that function so it's like that so we cannot directly assign so we cannot directly call a function inside the on click we have to assign a function to call the close model function so now everything looks fine when i click the add new record button this appears and the username is free and we can edit everything here and we can also close the model if i press edit record then the devil hunter's record is showing and we can and i cannot edit the username but i can edit everything else if i click the uh this other record then the then information of this record is showing so everything works fine till now i want to add another thing to this squared panel which is first of all these buttons are for updating the record and deleting the record and this should have a condition that if this dot state dot mode is not equals to add then assign the display to none otherwise just an empty object and in these buttons the condition will be inverted so now when i press the add new record button only this button shows and when i press the edit record button the update and delete button shows up and the close button should be a dark variant now let us start adding the grud methods first of all get all data method which will return an object id which will have this dot state dot mod username and another property data which will have an object having three properties which are inside each of our record so full name phone number and the date of birth full name this dot state dot mod full name the phone number this dot state dot so these should be exactly as it is in the database now let us create the insert data function it will consist of a constant dbref which will take the reference function and the database configuration object and a constant name record which will be equals to this dot get all data and we will first call the get function which will take a child function the db reference that we created and the reference of the data which is customer and then record dot id there should be a plus between these dot then there will be an arrow function so snapshot and inside this arrow function we will we will check we will assign the validation that if the snapshot exists with an s then alert otherwise set the data means add the data to the firebase the reference function db the same address we can create a variable address and the second argument will be the data so record dot data and that's it we will also create an update function but most of the stuff will be the same so this set function will be update and if the record exists then update the data otherwise say that cannot update user does not exist and another function to delete data if user exists then remove the data and we don't need this record dot data delete user does not exist now we just need an interface to deal with all all of these methods it's not necessary to have a interface but it helps every time so an interface method you can name it anything which takes an option if option equal equals to insert then call this dot insert data and in the end this dot close the model and i will assign this interface to these buttons on click event so an arrow function which calls this interface and passes let's keep it to add let's now test it so add a new record whitebeard add new record so the new record is here let's try to edit this record and i'm changing the name and the phone number update the update is not working let me try to delete this record so the record is deleted let us see what is the problem here it should say update so probably this was the problem now let me try to remove this this phone number and the date of birth so the data is getting updated so this is all for the video thanks for watching and do subscribe to the channel see you next time

Channel: The Amazing Codeverse

Views: 8,324

Keywords: firebase crud table using react js, react crud firebase table, read write update delete data firebase using react js table, table crud firebase, react js crud table firebase 9, crud on firebase using html table react, react firebase, react firebase 9 tutorial, firebase tutorial for react js

Id: D0r2O8ry3l8

Length: 25min 13sec (1513 seconds)

Published: Mon Jul 04 2022