Transcript from the "Mapping Through Data with Hooks" Lesson
>> 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: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: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: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.