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

Brian populates a dropdown with breeds from the Pet client data, mirroring the way that the animal dropdown was created.

Get Unlimited Access Now

Transcript from the "Breed Dropdown" Lesson

[00:00:00]
>> Brian Holt: We're gonna do the same thing but for breed. So breed and setBreed and we're just gonna make this initial state to be an empty object.
>> Brian Holt: And then it's gonna look really similar to animal. So underneath this label here, above the submit button, I'm gonna say label, htmlFor equals breed.

[00:00:26]
>> Brian Holt: And then we're gonna say, breed and another select.
>> Brian Holt: And then here we're gonna have inside of that id equals breed. Value = breed,
>> Brian Holt: From they're, we're gonna have onChanged = e returned e.target.value and we have to put that inside of setBreed.
>> Brian Holt: Then same thing for onBlur, onBlur.

[00:01:14]
>> Brian Holt: There's one more thing we wanna do, if I switch from,
>> Brian Holt: Like cats to dogs, right? They have different breeds so I have to be constantly refreshing that list of breeds to reflective to of whatever the current animal is, right? So I can't have a poodle cat and I can't have a tabby dog.

[00:01:35] That sounds weird but you can't, right? So sometimes it'll be switching between these things because I'm gonna have to be constantly getting that from the API. So what we're gonna do is when I give it a disabled, so disabled = breed.length. So if breed.length is zero, then disable it, right?

[00:02:00] Then you want that to be true. You could also do this, breeds.length === 0, or,
>> Brian Holt: Yeah.
>> Brian Holt: We'll define breeds here in just a second, cuz that doesn't exist yet. But does this make sense, and the other thing this is another ligature that was talking about. It's three different equal signs, but it's put together.

[00:02:32]
>> Brian Holt: So now this will always be disabled, like people will not be able to click on it if breed.length is 0.
>> Brian Holt: Okay, and then we're gonna do another thing where you can select all of them. So I'm gonna say option,
>> Brian Holt: All and then underneath that, we're going to have another one of these for loops or maps up there which is gonna be breeds.

[00:03:03] Again, which we'll define here in just a second, .map(breed, and then return for that an option.
>> Brian Holt: And inside of that option we'll have breed. Let's actually call this something different than breed cuz that's confusing. This would be like,
>> Brian Holt: Breed string or something like that.
>> Brian Holt: So breed string, breed string like that.

[00:03:32] And we have to get that as well the key of breed string and value of breedString.
>> Brian Holt: It's pretty similar to above. Again, we'll define breed in just a second, but I'll let you catch that up. Okay, so come back up here to the top. Also underneath breed and breedString, we're also gonna have to keep track of breeds and setBreeds.

[00:04:14]
>> Brian Holt: And then it's initial state is gonna be an empty array, right? Because we're gonna be requesting against the APIs like I have a dog, give me back all of the dog breeds. So this is gonna be constantly changing depending on what the user is selecting.
>> Brian Holt: Does that make sense?

[00:04:35] So for now, breeds is just gonna be an empty array. So no matter what, if you go look over here, you'll just see that it's always disabled. And set to all because we're never changing that.