Create Table in React | How to Display, Add, Delete and Edit Rows in a Table using React

hello everyone in this video first of all we will learn how to create a table in react.js and how to fix data from an API to the table dynamically and also we will learn how to edit the data how to delete record how to add a new record and also you will learn access Library HTTP request in response requesting Library access and also you will learn how to use Json server in your own react app to create a fixed server to test your applications so let's we will create something like this okay let's add a memory card it will be the end result okay gmail.com let's add it This Record would be added see the 93 card has added and let's edit it update and let's update edit and let's update it say the record has updated so let's delete it so the record has deleted it so we will create something like this so this video will be very helpful with you as a beginner so let's get started before starting if you are new to my YouTube channel don't forget to subscribe your YouTube channel and also like this video yes for this project we need first of all to create a server a fake server to test our application with that it means to which data to post data to that so for that we will use Json server so the first thing is to install Json server so to install that simply write npm install Json server I have already installed that okay after installing let's come here this is the Json server that we have okay so after that create a new root folder filed by the name of Json oh hey see this is the db.json whatever name you assign so I assign DB db.json and assign a few records to that okay whenever you require assign the records so then run this command let's try it Json server watch and our 5D media Json so it will run our server Json server so let's move to this URL we will see the required now this is the record that we have so now we will fix these three cards and we will display them in the table then we will perform operation on these three cards so let's start this and then let's come here to the app so first of all let's create one another component by the name of for example table dot G6 and after that we will write our code here first we will fetch data from that server okay from this fake API from this db.json file so to pitch the API first of all we run our application so we will use use effect hook here and let's try array dependency here and here we will call our API we will use axis with that tool for HTTP requests we will use axis our URL let's write this as our URL sorry copy this and write it here and after that we will get the promises and they will get a result so we will just simply cancel now our result and if there was any error okay to that console.log here let's call table in app.g6 so now let's run our application so to run that we will just try it npm run [Music] let's move to add this URL let's press this and it's move to console and the console we will see the result that we got from our fake server so here to the console see this is the object that we fixed okay the data these are the data that we have so now let's print them in a table so just come here simply to the table and here we will print our data you can just write table and insertable um we will first of all what we would like to display we would like to display um ID name and ID name and email just these three links table sorry we will light tea say the table row inside the table head ID name and then the email and also another column for Action we will write update and delete okay so now let's render our data dynamically and here we would like to render our data dynamically we will write so far to render dynamically first we will assign this data that we are getting to our variables so let's keep that cost data data is equal to use statehood it is an array type it as we will assign array to that and instead of this we will write data we will call that and we will write a result dot data that I will be assigned data will be assigned to this variable data now let's use that data.map user and index it is a unique value with us and let's write here table row and we will assign a key to this that would be index and here inside we will write table data inside that right user.id yes we have the ID so let's check them yeah ID and name then email okay okay just come here and we will write name and after that email yeah we rendered our data so let's check that um the data you wanting it is not displaying so result.data okay ID no problem yeah so let's check it here data.map user user Dot IDE user.name NT is the result for not displaying the data that we should write a return statement here okay if we are using these for the curly braces So within we should write a return here if we are using parenthesis this then we don't need uh currently increases okay so let's remove this one also yeah so it will later on now the data for us see the data has returned to us so now let's make it a little bit add some CSS design to this I will add some inline this is designed to this so I have added some design to my table okay to this table and the table design is I wrote in this after CSS file just this design okay I imported that in this file table file so now let's add two buttons for the edit internet yes button has added this so now first of all we should create a forum here under this table so by pressing that we should add any record or we can create on the top so let's create a forum first of all say that foreign and we should have two input fields the first one would be input type text Place folder enter name and the second one would be enter email so we should create a button by pressing that add a new project so let's check it how it looks like it looks like this way but we'll add some design to this styles so I have added some design for this form this is the design that we have added okay this design just for that and it looks like this now so now whenever we enter some data here we by pressing this visually enter that here okay so let's do it first of all we should store the input fields of these two photos so for that let's try it this would be email now let's change this video on change event and change just create a function and sit name e dot Target dot value it will assign the value that we are writing in this input field so this name variable and also the same for email set name and set email is used to update this name and email so when we press this button we should call our function just come here and submit event you will call handle submit let's create the central submit function event dot prevent default and here we should add a new record to our data debit.json file so for that I will write axis that post we will post the data and our URL would be this and then we will post our data to that our data would be name the ID name and email okay ID email and for the id id should be unique with us so for that I will write something like this okay first ID is equal to our data Dot data dot length minus one plus one so it will get for example we have 3D card that will get us the fourth if there is fourth record it will give us the five fifth one okay we will assign that to the ID and we will store ID inside here ID then we will get Horizon so let's print first the result what we are getting console.log result at page and any error yeah let's try it let's come here and we will just move to our just cancel let's come here let's add any Breakout Colleen .com let's press this add button so we got this data to one see the record has added but the ID has not updated okay the ID is not correct we should make the ID so let's come here length oh we should write here dot ID so let's try it again first of all try it again the ticket has added but the ID is incorrect okay so first I will remove the record let's come here to the dpz season I will remove this record yeah it's okay so I did it okay so now let's press add button see the record has added and let's refresh our page again what we got let's check it again that is not okay so let's make the ID correct so let's simply write let's simply write like data dot is plus one okay so it's okay now so let's remove all other records that we have remove this and let's refresh our page refresh our page and we have these three cards so let's enter a new one so one you record will be added here and that's the ID is six okay two four we have five records and the idea of this is sixth okay so if you depreciate it should be added here that has added but we should it should refresh automatically so for that we will just write here communication dot sorry Dot reload here let's go let's add a new record or if paper gmail.com let's press this button c new record has added this is the new record which has added so now we never refresh this edit button we should edit that in line here in this table okay so let's come here to our code so whenever we press this update button come here yeah this edit button so let's call and click event you will call handle edit okay let's create a we should pass our ID to this function so let's create a function here this and you don't need this just simply write parenthesis and here we will pass our ID the password light user dot ID so let's create this function now and I'll edit come here and create it here const antly it is equal to here we will get an ID inside this so now we will store this ID in a variable so let's create that advanced ID sit to use statehook by default we will pass for example -1 okay because we don't have minus three cards in our table so by default we have minus one so let us explain why I did that okay so here whenever we press the update button so we will update that record set edit ID we will update that to this ID okay we will assign now to this edit ID the video that we have record ID that we have clicked on that okay so after that let's now whenever we are printing data so here we will instead of this arranging table row we will render a forum okay to display here two input fields and here are in update button so we will write like this okay hip user.id was equal to equal to with the edit ID that we have okay whenever in ID became equal with this ID so then we will enter a render this part of code okay otherwise we will render this part of code okay this part so now let's write in state here a table row yes let's remove this one release date in this table Loop now we will render first of all the ID as we have here and then we will render a table data in foot field inside that that would be text and the way that video that we would like to update value is equal to with the user that name and also we should have one another for email so let's check it how it looks like and also we should have an a button a button that would be for update to update the record so let's check it for example I would like to edit this one so let's visit see we have this name and this fulfilled okay so now whenever we update this and by pressing this update button we should update the record so let's come here and just we will be exchanging updating the value we will store that somewhere and change is equal to we will just write as we have written in this input field okay we will use the same code and we will use the same variables these uh where are the names this name and email input Fields so let's come here instead of this let's write that on change we will update the name and also the email right here sit email yeah we will update this name in email after updation whenever we click this button on click and we will handle update call this function so let's create this handle update function simply come here const Ctrl V Intel update is equal to and here let's create that we will update now our record we will use axis dot put we will use put method and we will use our URL this is our URL copy this then we will pass our ID okay slash plus edit ID okay the ID that we have stored already in this edit ID variable and then we will pass our data so to pass the editor we will write like ID is equal to edit ID and name is equal to name we can write like this and simply we can if you write like this for short notation that is also okay after that we will get a result the result and also let's refresh our page we will write like location Dot reload it will reload the page and also we will update our sit ID let's set edit ID 2 minus one back okay we will update that to the minus one that cage if there was any error console .log here yeah I hope it will work perfectly so let's try it and let's check it oh it it works or not so let's for example fix this one edit okay let's change it uh it is not updating so let's you cannot update that regard I'll change it to your name just come here so let's declare to more variables more State variables to update our values so for that I will just simply copy these two I thought it will work but it's not here just add update update name and also will assign it update email and update set name and update City mail okay so let's call these methods now update seat mail and also updates it update City million also for and instead of writing this video we will just use here let's come here whenever we are to we press the update button so we never replace this update button we call this function so here we will update these videos okay we will update to our videos so here in this handle edit function we should get first of all a record based on ID so let's simply copy this as we got all records so now we will get based on an idea okay we will just pass here ID class ID okay we will get a record Basin ID so writing like this see data so instead of that we will just right now update this update to name and update email so we just come here and update our use it name and we will like result.data data we will get the first row dot name okay give the name from that and also update the email okay we got the record we will get the first record okay it means that the first that is we are getting an arrow in Array sorry in Array so we are getting the first record and the name of that so now let's write here instead of this we will write update name and update email those variables that we have created so now let's stick it so let's refresh our page back from scratch let's press edit we have this but we didn't get our record so let's check where is the error just come here yeah update name situ yo Sydney new set email just come here to handle edit yeah at 3000 plus ID okay and it is okay got the result so let's first of all cancel that console.log reset what we are getting come here refresh the page let's come here to the to the inspect when we are coding so we are facing with these issues so let's please edit so we got this data okay um data result.data dot name is email okay everything is okay so then what happened if you write result data you will just simply remove let's remove this it is not turned array it is an object so will it work or not so let's check it yeah let's refresh it okay let's press this edit button we got this data okay and also it's okay okay now that was not in Array so it is okay now so now if you would like to update it so we can update it okay for example let's remove this name from that and also let's remove this from that and make it.com so let's press the update button and our record has not completed so let's check now handle update here we will just user slash ID put we use put okay and we passed our ID name email and that in research what we what was the result so let's inspect that for example read it let's write something like this updated so by pressing update so let's remove this yeah just come here we will result play the results date so we got this data 89 name and email are empty okay so let's check the name and email or empty with us so while we are updating a record so we should first update name sorry update name and update email you should pass those values so now let's check them edit it let's also commit coming down it and Commit This so it will work now okay it will work now yeah it's selfish our code and let's edit it assign it a name yourself let's press the update uh game that updated so sorry we should write here name is equal to and email because in the server we have name in email fit let's update it now dot com did this see the record has updated let's say I edit this one update and let's add here one two three four update it see the record has updated so it was all about Edition so now let's perform the delete functionality we never refuse this delete we should delete that record so let's move to the delete delete button yeah it is our delete button whenever we click on this and click handle delete and also we should pass our ID to that user.id let's make it a function yeah let's create this handle delete function now let's come here in const enter delete is equal to we will get the ID and we will just instead of put now we will let's like write our code like this okay same to this we are writing something like this let's copy this paste it here instead update we will delete it now yeah the we will call delete method and we will pass our ID and finally we will get a result let's remove this and we will update our location Dot reload yeah it is okay so now let's come here so let's press delete this one see that a card has deleted let's delete the first one is also deleted so it was all about these operations so I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and also like this video and comment down thanks for watching

Channel: Code With Yousaf

Views: 49,700

Keywords: create a table in react, how to make a table in react, create a table in react js, how to add and remove table rows dynamically in react.js, react, react table tutorial, data table in react js, table in react, table in react js, building a table in react js, dynamically add and delete input fields in react, delete row in a table, how to delete a row from table in react js, react tutorial, react table, crud operation in react js

Id: 2aIjW_w_-Rg

Length: 30min 19sec (1819 seconds)

Published: Thu Mar 30 2023