Complete Intro to React v4 Complete Intro to React v4

Adding a Search Input Component

Check out a free preview of the full Complete Intro to React v4 course:
The "Adding a Search Input Component" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Create the Search params component containing a label and an input that is accessible from the "/search-params" route.

Get Unlimited Access Now

Transcript from the "Adding a Search Input Component" Lesson

[00:00:00]
>> Brian Holt: So this brings us to another commit point. If you've fallen behind here there's the commit down here that you can get on to. It also concludes our section on handling async UIs. We are gonna be talking about forms next, because everyone has to write forms [LAUGH] I think web, being a web developer you can just retitle yourself as professional form creator.

[00:00:23] So the next thing we're gonna do is we're going to make it a little bit so we can actually searches on this, right now it's just searching for somewhere and some pretefined location that we define at bill time, not something the user can actually interact with. This is not actually super user for finding pets at the moment.

[00:00:41] So, what we're going to do is we're going to make a search kind of component. So let's go do that.
>> Brian Holt: So make a new file. Call it SearchParams.JS we're going to import react from react. Class search params extend react.componant
>> Brian Holt: And down here at the bottom, export default SearchParams.

[00:01:26] Okay? Here, we're going to track location, animal, and breed cause those are the three search facets that we're worried about. So state is going to reflect that. It's going to be location, has to, you're going to need some sort of default location. So I'll just stick to Seattle, Washington.

[00:01:46]
>> Brian Holt: Animal, for now it will just be all animals. We'll leave that as an empty string. And breed. Which again, we won't have any green necessarily set here, but that'll get set here as well. Okay, we'll have a render method. And here, we will return div className = search-params.

[00:02:21]
>> Brian Holt: Then we'll do a label here. Label. And if you remember I told you that you can't use four. Normally labels would have a for here to assign it to some sort of, to some input, right? But for is a reserved JavaScript word because of for loops, right?

[00:02:41] So we're gonna day htmlFor here, that's why that is. So For="location".
>> Brian Holt: Then here we'll put Location and inside of that we'll also have our input. This can be capitalized, too. Location.
>> Brian Holt: Input.
>> Brian Holt: Id = location so that this matches this. That's the only reason we're putting the Id in there.

[00:03:13] Value = This.state.location. And placeholder = location.
>> Brian Holt: Okay. And for now, we'll just worry about location then we'll get to the other ones here in just a second.
>> Brian Holt: So now, we have a pretty simple route, right? That you can go in there, you can type in the location and change the location.

[00:03:53] That's all that's gonna happen here. So I want you to go back into App.js.
>> Brian Holt: We're gonna make one more route here, and this is gonna be called SearchParams. And again, I'm gonna be using VSCode to auto-import this. So I'm gonna hit enter, that'll import it at the top, which I'll show you.

[00:04:14] Actually, I can just show you right there, it imported up here on line 6.
>> Brian Holt: And then the path is going to equal to,
>> Brian Holt: /search-params, like that.
>> Brian Holt: So I just added lines six and line 18 that's all I changed here. So fundamentally, I didn't really show you anything new.

[00:04:42] This is just getting all of the pieces so that I can show you how to interact with forms. So let's go look at our browser really quick.
>> Brian Holt: search-params. And here I have the best form that's ever been created, if I do say so myself. I want you to try and type in this form.

[00:05:11]
>> Brian Holt: You broke the browser. This is my favorite demo of doing. Cuz people get so frustrated. It's like, this is so easy to do, in fact, it's very hard to break inputs. [LAUGH] It's very difficult to make it's impossible to type. And yet we have successfully done that here.