Adding Animal Breed

[00:00:00]
>> We wanna do the same thing here for breed, const breed, setBreed = useState, and again empty string here. Basically it's gonna be the same as this animal. So you can even copy and paste that, but we're just gonna say breed, breed, breed, breed, setBreed. And then we don't have an array of breeds, yet.

[00:00:37]
So we're actually gonna go get that list of breeds from the APIs. So for now, just make a const breeds = [] for now. And then we're gonna say, instead of animals, we're gonna just say breeds here. And then breed for all these, so, breed, breed, breed, breed, okay?

[00:01:02]
So now I think if you go back over here you should see, Location, that's working. Animal, I have all these options for animals. That's what the empty option is here at the top, right? We put an empty option at the top of every one of these. And this one is the option for someone to not select any animal, right?

[00:01:21]
They could select cat, and it's like, no, actually I wanna select nothing, I'm gonna search for everything, that's what that's for. And then here, the breed should be empty at the moment, okay? One more thing that we're gonna add to breed here. We wanna disable it, right? If there's no breed to search for at the moment, we haven't grabbed it from the API, yet, we wanna disable it.

[00:01:43]
So, what we can do here is we can say, disabled= breeds.length === 0. So now breeds has no length, which at the moment it doesn't, right? And so now look, it's nice and grayed out. It'll only be available for someone to click, once this breeds has any length, right?

[00:02:09]
Which, again, we'll grab from the API. And, again, this is just three equal signs put together. That's just my font combining them. So, again, if I come in here and I put, poodle in here. Now it has length, it's not disabled anymore. But now that it's empty, disabled.

[00:02:34]
For example, if I put a poodle in here, let's say I search for dog, and then I select Poodle, and also I select cat. I mean, Poodle cat sound kind of interesting, but they're also not real, right? So we probably don't want that. So how do we handle that?

[00:02:55]
Well, same thing here. Whenever you set the animal to be something different on change, right? You can say setBreed, to be an empty string, right? And now, every time that I set this to be something else, It clears out the breed, right? So they must have updated this jsx accessibility.

[00:03:24]
You used to have to put on blur here, as well. Because, I guess, sometimes the change event wouldn't fire correctly if you're tabbing through things as opposed to just clicking on them. It's not erring on me, so I'm not gonna put it on there. But if you'll see in my notes, I have on blur in there, as well, to handle the accessibility error.

[00:03:43]
But if it's not giving me an error, then I'm not gonna put it in there. Yeah, no, it should work, but it'd be nice to not have to repeat yourself to have both of them. Well, in the next lesson we'll talk about requesting from the API, which will be great.

[00:04:01]
But for now, you can go, there's a milestone here which is O for hooks. If you need to catch up, go ahead and grab that from the project repo, and then we'll go on to effects.