This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Delete Data on the Server with fetch

1:35 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Andrewsh86

This was a great series to go through. It was nice and clean and easy to follow. I really feel like I grok react after going through this.

Thanks!

In reply to egghead.io
Avatar
Andrew Van Slaars

I'm really glad it helped you!

In reply to Andrewsh86
Avatar
daniel

Great course, definitely a nice addition to include some functional concepts and thorough test suite.

Avatar
Jason

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.

Avatar
Andrew Van Slaars

Jason,

Thank you so much for the kind feedback. I'm really glad this was helpful for you. Good luck in your React journey!

In reply to Jason
Avatar
David

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?