React tutorial for beginners #54 Delete Method in React API

hi everyone welcome back to my channel my name is anil and uh in this rfgs video tutorial we will learn that how we can use delete method with the api so first question is why we use delete method with the api and this is a simplest question and we have a simplest answer also to delete the record from the database with the help of api right that's okay now what we are going to do in this video as you can see that we have a small table with some users right and we just plot plotted this table in the previous video which is video number 51 in this playlist right and if you want to know that how we can just plot this table again then you can watch this video because if i am going to code from the scratch then it will take around 10 minutes and uh video gonna very lengthy right so for plotting this table you can watch over this video even i will tell you the basics of the code that how is this code actually work and you can get this code from here also link is given in the description box all right so we will add a delete button with the every row and on click on this delete button the respective result will be deleted right and this result is deleted from the database through apis i will show you as you can see that in this api we have the five result and we will just delete some random results and you will find that the results are deleted from the this api all right so now let's look on the code which we already done so we already call our api on you can say that on a load of this space because whenever we will just visit first place this use effect hook is called only for one time and data is set in the user's state and this user state we are using here a map function and this is plotting in this html table with these are the headers and this actually result we have and here you can see that the complete result so id we don't have here id the reason is uh actually i just change this user id k with the id right and here you can see that we have now id here right and now we have the id in this column also all right so now let's add here delete button and then we will call a function on at this delete button click and make a delete api call and after that we will check that everything is working fine i will provide you the answer of my previous videos question as well as i will ask one more question and this is my instagram account you can ask me question on this instagram account as well as in a comment box also all right so let's uh add here a delete button so let's add a td button and just simply write here delete right here you can see that we have a delete button you can uh just add some css here because uh this is not looking good but i am not going to add here stasis because this is not a style video this is a logical video right and for header even you can add here like operations even we can use here delete operations update operation in the upcoming videos so i'm just going to make a generic word here operations so let's call a function on this delete button click so let's define our own click and let's say we will make a function with the name of delete user right and in this uh delete function we will pass our id because how we could get to know that which id we have to delete right ah so that we must have to pass your id so just write here item dot id and now let's define the function that's why we have added here because we did not define this yet so let's define just simply make here function delete user and let's get here id like this and for a moment let's just try to alert here id so we can just get to know that id is working fine so whenever i will just click on a bruise which is id 3 then we will get alert with id 3. four now one that's great so now let's call api so for calling the api we must have to know the api's url so this is our api url right and how do you get to know your your project's api url you can ask to your api developer right all right so now we have to pass your id also so how we can pass the id we can just simply use here plus id but this is not a good way we can use here template template type so just use your back pick because this is a modern way and we have to call only one backpack here right now this is perfect and let's add here dollar and now put here id this id will coming in a function parameter all right so now let's provide a second parameter to this uh fetch function and let's just define her method only just define a method method can be like a delete and that's it now we just need to get a result for that let's use a then and as you know we use this then for uh promise handling to resolve the promise so just get here a result but as you know result again provide a stream result so let's convert this to a json and again use then i just need to use here then like this and uh let's just get here some parameter like resp and you can just console dot warn it if you want to check your result everything is perfectly fine whenever you will just hit the button now your data will be deleted but there will be one problem you have to refresh your page after deleting record because uh this page did not know that this table did not know that the result is actually deleted so we have to again call this api to check the latest data but first of all we will let's delete in a simple way then i will show you that how we can do it without manual refresh also as you can see we have a five result here right everything is fine let's uh just delete a record number four and here you can see that two requests are sent to the server one is a optional request you can see that and this is basically what check that server is working fine or not and second one result is delete here you can see that this is the delete uh request and this is the url that we sent to him uh and this is the result because we are deleting the record so we don't need to any result here so and you can see that we have all results but we need to refresh it because data need to update here and now you can see that one two three and five and this record is clearly deleted from this api also all right that's great but how we can just reload the same time because we don't want to refresh it manually for that what you can do just get this fetch function inside uh another method like get users right and just make a function to it and now let's call this function at a first time get users as well as whenever our delete api is done then we can call it again right like this now let's whenever we will delete our four api will be called here you will see that whenever i will just create delete a third record then you can see that all right because uh we already sent our optional result so there will be three because option request will be gone one time then this is a delete and this is our get and here you can see that our record is deleted and rendered automatically and this result is deleted from here also let's try to delete fifth result also and this is working great so this is the way that how we can delete a user and uh reload it manually without a refreshing man reload it automatically without refreshing it manually right okay so in last video i asked that can we send some body part with the get method no we cannot send and uh my another question for the next video is uh in this video we use a delete method for delete the record can we use post method put method or get method for delete record from api you can comment the answer of this question in a comment box and thanks for watching this video

Channel: Code Step By Step

Views: 32,552

Keywords: react tutorial for beginners, react js delete api, react js api tutorial, react js delete method in rest api, react js delete rest api, anil sidhu

Id: BGbfXVZzFCg

Length: 10min 3sec (603 seconds)

Published: Thu Dec 17 2020