Current section: Forms 59 exercises
solution

Form Actions

Loading solution

Transcript

00:00 All right. So we've got a bunch of stuff in here that react actually kind of does for us. So what I'm going to do is first do a little bit of a refactor. We're going to make a function called log form data. It accepts a form data object and then it's going to log. Move that up there. And then down here we have log form data.

00:17 Pass our form data. So just refactor didn't really do too much. So really the only thing that we're trying to accomplish here is log the form data when it's submitted. So all of this stuff is just like extra extra stuff that we have to do so that we can get to the point of actually logging the form data.

00:35 And this is enough boilerplate that reacts like, hey, you know what, everybody needs to do this. And we can add some really cool stuff like pending and things like that in the future if we just provide a built in mechanism for this.

00:50 And so that is why react has the ability to accept a log form data, accept a function as the action. And that handles preventing the default handles getting the form data out of the form. And we just accept that form data and then do whatever we want to with it.

01:07 We can make a fetch request. We could do whatever. And that works out nicely. And if we save this, you'll notice we actually get a warning because the encoding type and the method are unnecessary. React will handle those for us. The on submit is now unnecessary as well.

01:22 It will run, but we don't need it because we are doing what we need to do with just log form data. And now our formal work nicely. And one other thing that react does that's kind of interesting is reset the form.

01:38 So here we'll say I'm not 33, but we'll go with that. And then we'll select all these things and we'll set this and then hit submit. And we get our form submitted. And our form is also reset for us on that submission.

01:55 And it's reset to the default values. We're getting this warning from react dom. It's actually not coming from react dom. This is coming from the browser. And the browser is just saying, hey, you called reset on this form or react dom did.

02:10 But the format doesn't match because you tried to reset this to its default value. The default value for this was nothing. We'll talk about default values in the next exercise. But, yeah, we're trying to reset these to the default value. You can't set a default value of this to an empty string.

02:28 So we'll take care of that when we are talking about default values. But that's what that warning is all about. I don't want you to freak out like, whoa, what's react doing now? It's just resetting the form. Nothing too fancy going on there. So, yeah, it resets the form for us. It gives us the form data so we can do whatever we want to with it.

02:44 And then, you know, if there's some sort of error or whatever, we can handle that, too. So, yeah, pretty, pretty nifty that you can just pass a function to the action and use that. Thanks, React.