Mapping Through Data with Hooks

[00:00:00]
>> Let's make some more inputs then here in SearchParams. So we're gonna have different kinds of animals, our API is limited to bird, cat, dog, rabbit, reptile. Okay, we're gonna have an animal's piece of state as well. So animal, setAnimal, = useState. By default, it have no state.

[00:00:40]
And then under the location label, we're gonna put another one of these and it's gonna be a label, it's gonna be HTML for animal. Animal, and this is gonna be a select. And the id="animal", the value=(animal), the onChange is going to be equal to, This function that we're gonna make.

[00:01:21]
It takes an e, it gives back setAnimal to be, Whatever e.target.value is. Okay, and then here we want an option that's gonna be empty. So I have this array of animals up here and I just wanna render this out as a list of animals that people can select from, right?

[00:02:05]
I could go through and I could go make an individual option for all of these, but it'd be really nice to just use this array to generate components, right? So what I can do here is I can use this curly braces to put a JavaScript expression. I can say (ANIMALS.map(animal)), and it's just going to return an option for every key in there, right?

[00:02:31]
So the key is gonna be equal to animal, and the value here is gonna be equal to animal as well. Now if you remember, if you give React an array of components, it knows what to do with that, right? And what does map do? It takes an array of one thing and returns to an array of something else, right?

[00:02:53]
So the transformation that I'm applying here for every one of these animals in here for bird, cat, dog, rabbit, and reptile is going to return an option for each one of those. I'm going to end up back with an array of React components, which React knows how to render, right?

[00:03:11]
In other words, you use map a lot in JavaScript. Sorry, in JavaScript, yes, in JavaScript, but in React in particular. So, If you're not familiar with map, let's just give you just a tiny just taste here really quick. If I say I have numbers = [1, 2, 3], and I say numbers.map, and it takes in a number and returns number times 2, what do I expect to get back?

[00:03:56]
[2, 4, 6], right? No. So I took this array of [1, 2, 3] and I transformed it into the array of [2, 4, 6]. This function here gets applied once to every single item in the array and whatever it returns gets back in the new array, right? So I have this number of [1, 2, 3], I get back the [2, 4, 6], I doubled every item in that array, right?

[00:04:28]
Same principle at play here, we have an array of strings and I am returning an array of React components, right? Just basic JavaScript is not React in particular, it's just JavaScript in general. But just be aware that you're gonna see this map everywhere. And again, we're using the parentheses for implicit returns here.

[00:04:54]
You can absolutely make this curly brace and return all that kind of stuff, because we're just taking animal and returning an option for each one of them. Implicit return is here, so it's great.