Delete Data on the Server with fetch in React
We’ll use fetch to delete items on the server when the client triggers a removal, and update the UI with a success message once the delete operation on the server has succeeded.
[00:00] Our application handles removing items from the state, but those deletes aren't reflected on the server. If I delete some to dos and then I refresh the browser, those deleted items will come back because they're still persisted on the server.
[00:15] To persist these deletes, I'm going to add another call to fetch by adding another function to the to do service. I'm going to duplicate save to do and we're going to make a few changes to this.
[00:25] First we'll rename it and we'll call this destroy to do. Then we'll update this argument because we don't need the entire to do for delete, we just need it's ID. Now, I'll update my URL because I'm only passing in the ID. I can just reference it directly.
[00:40] Now I'll update the method to be delete and we won't need the body, so we can delete this and we won't receive any JSON back, so we can delete our call to then. With that defined, I'm going to save that and open App.js.
[00:54] Then we're going to have an import for destroy to do and then I'm going to scroll down and find my handle remove method. Here, I'll add a call to destroy to do and I'll pass in our ID and then I'll add a call to then and call this .show temp message to do remove when we get a response from the server. I'll save that.
[01:21] We'll let the browser reload. Now when I delete an item, I'll get the to do remove message. Now if I open up tb.json, we'll see that I have four to dos and the rest have been deleted.
Just finished your course Sir, and I must say - I very much enjoyed it. Not just for the prolific amount of technical information you taught, but also for the repetitive nature in which you executed tasks (and I mean this in a good way). By teaching us how to use Jest for TDD, how to build and implement services (including correct REST verbs), etc etc, and then repeatedly utilizing that lesson it drilled into my head HOW to get a thing done, mechanically and theoretically. I find this type of teaching very useful, much like a martial arts class. By my 10,000th punch I am starting to learn how to punch.
Anyway, I am learning React for the first time and this course has given me a ton of confidence. Thank you, keep up the good work.
Jason,
Thank you so much for the kind feedback. I'm really glad this was helpful for you. Good luck in your React journey!
Thank you for this course. I'm mostly from an Angular background and trying to sharpen my React skills - your course was a good length and well explained.
I was tempted not to watch this course as it seemed I already knew most of itscontent, but I'm happy I watched it: there were lots of pro tips, plus showing us nothing less than creating a custom router! Awesome serie: thanks Andrew!
I just wish there was... closure :D Ended quickly but wonderful tutorial.
Great course, well done, thank you
Thank you. Great course and great inspiration on how helper functions should be organized and used
Very nice course Andrew! Just one small comment regarding to temporary messages. I think it's a good practice to assign timeout to variable and remove it during unmounting component. In other case, if you unmount component before those 2500ms you will try to set state of component which doesn’t exist anymore. It may occur errors in some cases.
wouldnt it be better to remove from state only if the server call succeeds? (simple thing...but important i think).
great course btw! would love to see more react courses from Andrew!
Great course, definitely a nice addition to include some functional concepts and thorough test suite.