Current section: Optimistic UI 29 exercises
solution

Form Status

Loading solution

Transcript

00:00 So we want to take this button and make it a little fancy and reference the form status. And so we're going to create a component because we can't do it right there in the same component that's rendering the form. So we're going to make our function and this is going to be our create button. We're going to get our pending state from.

00:19 Use form status, that's going to come from React, excuse me, React Dom, this is important, it comes from React Dom and then we're going to return our button. So let's move this down, stick that there, but then we're going to enhance it a little bit with this pending state. So we're going to say disabled if it's pending.

00:37 And if it is pending, then we'll say creating. Otherwise, we'll say create, create. There we go. And then we render our button in place of where our submit button was there before.

00:51 And now if I say mining vessel and speed of four and here's our mining ship, we say create and we get creating right there. So much better experience for users. They know exactly what's going on as they're using our form and all of that done with the form use form status.

01:10 Let's take a look at what form status has for us. So form status console log form status. And then, of course, we'll get our pending out of form status. OK, great. So with that, let's pull this up.

01:28 We'll go to our console. We'll do actually before we even submit. Here's what we got. Action is null, data is null, method is null, pending is false. OK, that's fine. And then minor and five. And here's our mining ship. We create and boom, we've got our pending is true.

01:47 And now we have data is our form data. So we could actually read instead of saying just creating, you could say creating form data dot get name. Oh, my goodness. Wouldn't that be cool? And that would come from. Here, so from form status and text,

02:05 which would probably be happier if we were doing a form, a status dot pending and then form status dot form data. No. Hmm. Does not exist. Well, I'll tell you. Oh, it's because it's called data. There we go. And with that, then, hey, let's just do that.

02:23 What the heck? That'd be fun. My cool ship. Top speed of one hundred. And here's our mining vessel here. Create creating my cool ship. What do you know? That's kind of neat. So you have access to all of that information.

02:39 You know what method and the method is kind of funny because we're not actually submitting using a method. So I'm not sure what to do about that. But yeah, it does also give us the action.

02:51 So any information that we can gather from that and then it returns to its pending false state where all those things are. No. Pretty cool.