Complete Intro to React v4 Complete Intro to React v4

Adding a Select List with Options

Check out a free preview of the full Complete Intro to React v4 course:
The "Adding a Select List with Options" 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:

Add a select list with types of animals as options. The list of options is populated by an array of constants from the Petfinder API Client.

Get Unlimited Access Now

Transcript from the "Adding a Select List with Options" Lesson

[00:00:00]
>> Brian Holt: So let's go ahead and go make animal change now work.
>> Brian Holt: So we'll do handleAnimalChange up here.
>> Brian Holt: this.setState.
>> Brian Holt: To be animal:event.target.value.
>> Brian Holt: So there's a predefined list of acceptable animal parameters to provide to the pet finder API. It's an unchanging static list of ten different animal types like cats, birds, dogs, barnyard.

[00:00:45] There's a couple of them, right. And I've actually just stowed this away inside of pet finders so you can actually just pull it straight out of the pet finder client for you. So let's go ahead and do that now. In general the way I would do it is I would say const animals = animals, right, and it's actually smart enough to go auto import this from pet finder client again.

[00:01:11] But let's go write it up there so you know how I got it in here. So import, and then I'm gonna put curly braces here, animals like this, from petfinder-client. This is a array of strings, as you can see right here, and it's just a bunch of different animal types that are coming from the petfinder client.

[00:01:38] Again, this isn't technically destructuring, but it looks and functions like destructuring. We're just pulling the animals named export out of petfinder client. That's what that's actually doing.
>> Brian Holt: So under our input down here, so under this label, we're gonna put another label, label for htmlFor, rather.
>> Brian Holt: Animal, this again will be Animal, like this.

[00:02:12] And we're going to make a select.
>> Brian Holt: id=animal.
>> Brian Holt: Value=this.state.animal.
>> Brian Holt: onChange, this.handleAnimalChange.
>> Brian Holt: And I'm pretty sure that if I try and close this without a blur change, yeah. So if you have onChange, you'll also have to have onBlur.
>> Brian Holt: Otherwise it's not accessible because you can technically go through, change something with a keyboard, and then tab away from it, and it wouldn't technically change a, cause an onChange.

[00:03:10] So that's why you have an onBlur as well, to double make sure that every device works with these selects.
>> Brian Holt: Okay, the first thing that I want on here is just an empty thing, right, like an empty option that reflects having nothing selected, right. So they can choose no animal, which is show me all of the animals.

[00:03:33] So the way you can do that is just put an empty option up here, like that. Or as Prettier will make me do it, it'll just condense it down to that. So even if I try and do that, Prettier will just automatically condense that down to that. Animals, this is just an array of strings, so we're gonna say ANIMALS.map

[00:03:55]
>> Brian Holt: Animal, and we will implicitly return here.
>> Brian Holt: Option.key =animal. Value=animal. And the string is animal. So we use animal three times.
>> Brian Holt: Key because you need some sort of key so that React, anytime that you're doing a map, you just have to give it a key, that's just how it works.

[00:04:30] Value is that's what's actually going to be saved in your state if someone selects it. And then we actually want to show them a good display name, so we show them animal.
>> Brian Holt: Which is how that ends up looking.
>> Brian Holt: Good?
>> Brian Holt: So now we should be able to select an animal.

[00:05:04]
>> Brian Holt: I probably need to change that back to ping. This should just be location on line 24, location.
>> Brian Holt: Okay, so now I have Seattle, Washington up here. But now I also have a list of animals that I can choose what kind of animal I wanna search for.

[00:05:24]
>> Brian Holt: So you can search for small furry animals.
>> Brian Holt: Typically I'd want to have better display names for this, but for now this works. This is actually what you have to send to the API. You have to send small furry or it does not recognize it.
>> Brian Holt: Okay.

[00:05:56]
>> Student: So when you select the animal right now, does it populate into your field?
>> Brian Holt: Yep, so that's a good question. So let's actually just open our dev tools, I think that's the easiest way to show it here. Dev tools,
>> Brian Holt: And then go to React,
>> Brian Holt: And we go to searchParams, right.

[00:06:25] So you can see here, animal is blank right now. If I select a dog, you can see that it updates to dog. Or smallFurry, or I could even come in here and change it to cat, and it changes it over there.