This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Handling User Input" Lesson
[00:00:00]
>> We've seen one way to handle async code and react with effects but sometimes you need to be more reactive to like user input right now all we're doing is when the page loads we're loading in data from our API, right? We also wanna make it so that a user can request data from the API when every time they submit the form, right?
[00:00:22] That's kind of the point of the entire form there. So let's go do that. Top over to your code here. And we're gonna go into search paras.JS. And then here on it's actually fairly simple because we kind of set it up in a really good way we can just put a submit listener here on the form so what we can do We're gonna just make an A on submit, And then, we'll just make a little function here that takes in an event.
[00:01:01] The first thing that It's gonna do as you might remember if you've ever written any form code before is e dot prevent default, right? So you actually don't submit the form actually if you're not familiar what I'm talking about if you don't do this it's actually going to do like a post back to itself, right?
[00:01:19] So it's going to submit the form to itself like in an HTML form. Which will refresh the page. So if you're like clicking submit and then it's like refreshing the page, that's what it's doing. Okay, and then all we're going to do here is we're just going to say request Pets.
[00:01:38] Now, why does this work? Well, if you look, we just made a function up here, request Pets, that's in scope of all of these different variables, right? So we don't have to provide it any sort of additional parameters or anything like that. We can just call request Pets, and it'll have all of the most up-to-date information, right?
[00:01:58] Due to the magic of closures. Or just state in general, right? It's not even necessarily closure. Cool, so let's go over here and try it again. So let's try some meeting just for, I guess these are all dogs. Anyways, so that's not really helpful to try submitting for cats and you can see now we're getting different cats back from the API Or we can look for what do we have here American longhairs Now, someone is gonna ask me the location is kinda wonky it doesn't actually work super well.
[00:02:45] That's because it's basically just doing it basic text matching. So I didn't put a lot of effort into making that work super well I'm just gonna throw that out there, right? I put Seattle in here and I'm pretty sure some of these are definitely not from Seattle but here we are, yeah.
[00:03:01] In general if you were doing some sort of like location database you'd be using that instead of just using basic pattern matching which is what I was doing with this particular API. These are just Azure functions that are running in the background at the moment I did that, cuz it's cheap and new people hit this API a lot.
[00:03:24] [LAUGH] Sometimes it's funny to go look at like the request logs and I'll see like there's like one person that must have just gotten wrong. And so I get like a million requests from them all at once. And then it stops and they never come back. I don't know if it's shame or something like that [LAUGH].
[00:03:40] It's okay. That's why we put it on something like serveless functions because they're very cheap. There's no API shaming here. So we did this with a form as you can see here. This made us all so this is like one very simple succinct way of doing it. We just watched for form submits and then we're done.
[00:04:01] The other way you could have done this which would have been the wrong and very much more difficult way is you could have added like a click handler ,to the button and a button listener to all the. Like labels and stuff like that. Cuz you had to account for all the different ways you can submit a form, which is a lot, there's a lot of ways to submit a form, right?
[00:04:23] So don't do that just listen for submit events. It's just like a billion times easier. Yeah, Mark.
>> There's a question about what's your opinion on. Formic or some of the other react forms solutions.
>> Sure. So there's a lot of form libraries out there that are basically like premade forms.
[00:04:49] I tend not to use them but I also haven't had recently we've been writing code to, like very complicated form needs, right? Like these are typically what my forms look like. It's just like a really simple form that I style up and I submit, right? If you have stuff like you need like complex validation, like you need to make sure that the city and the state and the zip code all work right and you need to show like errors on the correct one if something goes wrong.
[00:05:16] Something like Formic, which is the only one that I have ever used is helpful. So that's about as much as I'm gonna give because it's as much as I know. But basically if you have complex like validations and logic around that, then something like former can be helpful.
[00:05:37] Otherwise, Nick, as you saw here, this is not terribly difficult to do yourself. And I generally prefer less libraries, less code, more obvious what it's doing, right? You can read through the search params, and you know everything that is doing, right? You don't need to understand how formic works to do good.
[00:05:55] That's just my kind of way of writing code but I'll leave you to decide what you think about that. Cool the one thing I did want to hop into and show you quick from the notes here and I think handling user input here if you go here to the react docs which by the way they're about to release new react docs I think that beta dot reactjas.org I like that anyway, they're great.
[00:06:23] Written by a Front end Masters teacher, Rachel Nabors. Fun fact she's great. So there's tons of events that you can listen to let like on composition and you can listen to key press, focus blur. But there's tons and tons of stuff that you can do here. And so I invite you to just go through all this like synthetic event part of the docs, synthetic events.
[00:06:49] Remember, it means that it's actually technically a react event and not a real DOM event. But they've shaped them the exact same way so that you can just kind of assume that they work the same. I mean, you saw like, we've been using like e dot target dot value and e dot prevent default and those kind of things, like React re implements that part of the of the DOM cool.
[00:07:12] That's one reason why they're on submit. Kind of, a loop back around what I was talking about earlier. There's nothing that we did here that was very complicated in terms of keeping track of all the data here in state. So we really what we could have done here, instead of like, watching for on changes and on blurs and, all that kind of stuff here, we could have done but none of that.
[00:07:38] And then here on submit, you can actually pull the form data off the event. And then we could have put that into request pets, right? And that way we would have had none of this logic, which would be kind of nice, right? We could have just looked at the forum, handle all the data tracking and then just use that to request the data.
[00:07:59] If I was writing this for myself for like a real application that's what I would have done. It's an uncontrolled form is what you would call that. In other words, I would have just done this like a normal form and not like a React form