00:00 There are a lot of cases to consider if we were to just add an on click and do a fetch request or whatever You know, you know the drill They're just an outrageous number of cases Like what if the user is quick happy and then click it a bunch of times or or what if that's actually useful? but then you have race conditions on coming back and

00:20 Like what if what if what if how do you handle errors all that and so many so many things that you have to consider And on top of that this if you add an on click this button won't work at all until the JavaScript is finished loading what would be really nice if is if we just like build on top of the web platform primitives and

00:37 Turn this button into a submit button instead. So that's what we're going to do. We're gonna say form and That's coming from remix run react This is going to be a method post not delete because again browsers only support get and post Remix of course supports the others

00:54 But I like to just rely on what the browser supports and that's just getting post and so we're going to use method post And no, I'm not going to use that class name. Thanks. Anyway, copilot Close that up and then put the button inside of it and then add a type submit to this button So it's all set up now. You don't actually have to have the type submit if it's the only button

01:14 It'll be the submit button, but I like to be explicit about that. So that's why we're adding the type submit So with just that if I hit delete then we're going to get that error that might be a little familiar Does not have an action so we should add that action and that's what we're going to do right up here

01:30 So let's export a function called action and this is going to take our request and that's coming from data function args And we also are going to want to have the params as well. And in fact, we don't even need the request There's nothing in the request body. We know if they if they're hitting this action, they're trying to delete that That's like the only thing that we can do on this page

01:50 We'll address the question that some of you are probably thinking about Well, what if I do have multiple actions on the page? Like what if I want to have multiple forms on one page like that's a pretty common thing. How do you address that? Yeah, we'll get to that next. So with the params, we're going to delete the note. So let's just grab that Thank You Marty the money bag

02:09 And once it's been deleted, we need to redirect the user because they're on a page that shouldn't exist anymore So we're going to return a redirect With a remix run node and we'll redirect to the users notes So with that we hit delete and boom

02:27 We're back to the users notes and we can delete this one and we can delete that one and just keep on going until they're All gone. So that's working swimmingly. So in review all that we really did there's there's not a whole lot to this one But it is important for you to know if you've got some sort of user interaction that needs to perform a mutation

02:45 you turn that thing that they are interacting with that thing they're clicking into a button and Then you put that inside of a form and then you handle that form submission Just like you handle any other form submission So buttons can be form submissions like that buttons can actually be a part of forms

03:05 Even if it's the only thing that people are doing that is just the way you should do mutations There are of course some scenarios where the user is not interacting with anything on the page and we need to do some sort of imperative Mutation and we will talk about that at a future time But most of the time the user is the one performing the mutation

03:25 We're making that mutation happen. And so this is how you make that that magic happen. It's awesome I hope you enjoyed that one