React JS CRUD - How to delete data in react using laravel api | dekete data from DB in react api

hey guys welcome back so guys we are continuing our react.js Cloud application using API okay so now guys in this video we are going to learn how to delete the data from the database using API so now guys let's get started so let's move to this student's route and to the page okay that is student.js file let's move back to the file and here we are on the student.js file as simple guys and now let's move below at the HTML table okay so this is my HTML table open this so here is my table head and this is my table body so this table body is in a variable called student details so let's move to that variable student details here is a student details where we are looping all the Student Records in this HTML we have a delete button and on this delete button we need to delete the record as simple so now guys let us get started to delete the record okay so first step let's mention this button type as button and then on this button click we need to get the ID and pass it inside a delete function so as simple let's create on click equal to open and close calibrates pass the event and inside that event we pass the delete student function so we need to create this delete student function and inside this I pass the event and then the item ID so we can copy this item ID that is your student ID will pass the event and the ID all set so now we can copy this and just go and here let's create that delete function okay so cons where delete student equals to open and close and pass this function okay so as simple guys and now here you get your event the first data and second is your ID I just want to prevent the page you refreshed so even dot prevent default and now so first this clicked equal to event Dot your current Target okay so you get your current data this clicked inner text equal to as deleting dot dot dot so once we click that it will show deleting and then send the access request access dot delete function so guys let us not waste time let me just copy it from top so we can just use from the student edit so what we'll do let us go here let's copy this simple code access post request so here we paste it okay and here we need to change to delete method why are we changing to delete because we have used that in our laravel so here you see on the route delete we are using this method to delete the record of that student okay so guys let us copy this URL API let's paste here all done and you need to make editable here which we are going to pass the ID so let's copy this ID and send here okay so we pass this ID and there is no data so let's remove that we are not sending any other datas and then inside that then you get the response and once the response comes you show the message and set loading whatever loading goes you set it to false or else we are not showing the loading process by because we are using something like this okay so once we click click on delete button it should tell it's deleting not loading so we can remove this set loading part and you can copy this and paste here and tell the closest of table row dot remove function okay let's remove this so on what we have clicked we are going to remove that complete table row so if I click here on this delete button so if I click here on this delete button it will remove the this complete row ID number three row okay and then let's move Below in the catch function so here never comes your input request it's just the ID sending the ID and checking so if ID is not found you can show this alert text you can make it to delete let's copy this and paste here and here we make it to delete okay and then guys here your 500 internal server you can make it to set loading false but we do not require just remove that and keep only alert so let's get back let's add the student here I am going to add on dummy then dummy at gmail.com then 10 digit phone number and a BBA let's save the student so one student is saved it goes back to the students page okay student created and redirected to student and here is your record and now guys I'm going to click on delete let's see delete or not so let's click on delete it's showing deleting and let's wait okay student deleted successfully we got the message and here you see that fourth record is with deleted let's refresh and see whether just removed the record or deleted the record perfect so it's deleted the record also as cool so now guys we have successfully learned how to delete the record in react.js application okay so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 2,504

Keywords: fundaofwebit, how to delete data in react using api, delete method in react api, api delete method in react js, laravel api delete method in react using api, react delete item from list, react tutorial, react js tutorial using api, axios delete request api in react js

Id: CII5iDEJ3wU

Length: 6min 45sec (405 seconds)

Published: Sun Mar 26 2023