This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Mapping Data to Component" Lesson
[00:00:00]
>> So, open your terminal here we're gonna say npm install -D and we're gonna do enslint-plugin-react-hooks@4.3.0. So, that one right there. And then we're gonna go into our package that are eslintrc.json. We're gonna add No one knew up here. Plug in. On react-hooks/recommended. So, we have to put that in there again just as long as it's above prettier that's fine and then we have to add one more plugin which I forgot to add my notes but you do.
[00:01:02] And it's just gonna be react-hooks. This is just gonna validate what they call the rule of hooks, which is mostly, don't put hooks inside of the if statements. That's like 99% of what's useful for, it has another thing for use effect, which we'll see in a second. But, yeah, that's what mostly what it's for.
[00:01:25] So generally, when I install something like that, I just like to go make sure that it's gonna break we're expected to break. So, let's just say, if true, So, right there, you can see on 633 it is breaking. Usestate is called conditionally react hooks must be called in the exact same order in every component render, right, so, it's preventing you from hitting that issue outside.
[00:01:57] And I don't know why it's not running in my editor. I told you that es lint one is pretty infinity. Sometimes you can do like reload window. There you go. And that worked. To do that I just hit Shift Command p and then there's this developer reload window, which just forces VS code to like reload itself from the inside out.
[00:02:20] It basically read bootstraps electron, that's what it does. So, let's go make an animal drop down. So, we already did this or if you haven't, you can look there on line five, make an animal hook. And then we're gonna make the all the animals that we can search for which is gonna be const.
[00:02:41] Animals, I'm gonna make that in screaming case because can be a constant. And our API supports birds, cats not carts and not cat that's just cat. Dog, rabbit and reptile. And then we got to put an animal drop down underneath this label here, so we're gonna say label Htmlfor=animal.
[00:03:22] And inside of that is gonna be animal. And then here, we're gonna have a select. And it's ID is gonna be equal to animal. Value is going to be equal to animal. Okay, and then here when do two handlers when do an onchange and an onblur So, I'm actually gonna make this a full function here.
[00:04:00] This is just a one line function. But every time that you change the animal, you're also gonna have to change the breed and we're about to do the breed as well, right? Cuz you can't have a poodle cat or a cockatiel die, I mean, sounds weird, but sure.
[00:04:13] In our case we're not doing any immune hybrids. So, updateAnimal to be whatever e.target.value is, target value. And then, we're gonna make an update breed function here in just a second. And we're just gonna set that to be blank, right? And that animal wouldn't be made that set, sorry.
[00:04:48] Set animal and set breed. We haven't made separate yet, so that'll be in just a second. And then we're gonna make an onblur. Now, you might ask, why would we do that? Because sometimes when browsers navigate away from a select, or via like maybe different tools like for example a screen reader or some sort of like accessibility tool, they will not fire the change event.
[00:05:12] Which means that we would not capture it sometimes which you don't wanna do but if you do on change and onblur, you'll get both of them. And the real answer to it is the ESLint told me to, so I did. Okay, and it's just gonna be the exact same logic you can just copy and paste it exactly.
[00:05:36] Okay, here we need our options. So, the first option you want to be like nothing selected, right? Which you would do this way normally, right? You would just have an option that has no value and nothing inside of it. Because it's JSX and you can be cute with it.
[00:05:50] You can just actually have a void option tag despite the fact it's actually not valid HTML. It is valid JavaScript or JSX rather. Then after that we're gonna take our animals. We gonna do a map function. So again, animals, remember, is a array. An all dot map does is it takes an array of one thing and it transforms it into an array of something else and it's a one to one match.
[00:06:17] So basically, I wanna take bird and I wanna make a bird option out of it, which is what I'm gonna do, right. So, I'm gonna take bird map and I'm gonna take, this is gonna take an animal. This is gonna return a function, and I'm going to return, Option key= Animal.
[00:06:43] Value=animal. And we're gonna have animal here. Trying to figure out why this is upset. I think it's that, now, there we go. Okay, so, array of animals. We're taking that and we're doing a map function. So, this map, function's gonna take a list of strings and transform it into a list of react components.
[00:07:26] Now, remember way back to the beginning of the course where we were giving in a list or an array of react dot RCE elements. Right, as the children, that's all this is doing. Like think about this, you're returning JSX. So, this is gonna be an array of results of React Create Element, right?
[00:07:49] Which is valid to react. So, that's why you're gonna use map everywhere inside of JSX. Basically, anytime they haven't like a list of data that you need to transform into a list of components, that's the methodology that you're gonna use to do. It that makes sense? We can make this a little bit simpler because we're transforming one to one and we have no other logic in here.
[00:08:07] You can use one liner functions here. So, instead of having this, And I can get rid of the return, then here I have to put parentheses, Okay, there we go. So, notice I turn this, curly brace into a parenthesis, this is called an implicit return, right? If you have a one line JavaScript function.
[00:08:39] So, if I say, const sum equals x, y, and I'm just return x plus y like that, right? That's a function that takes two numbers and adds them together, which it turns out right? You can rewrite that as, These two functions are exactly the same thing, right? It's called an implicit return.
[00:09:13] If you have a one liner here, then that works. That's all that this is doing here, it's an implicit return. And just to drive home the point here, if you put those in parentheses then you can put them on multiple lines. That's why this parenthesis here, this goes down to the next line.
[00:09:37] Otherwise, it would think you have an undefined return. The other reason I'm showing you this is it's not so you think I'm clever or this is clever code or anything like that. You're just gonna see it everywhere in React code. Obviously, the setBreed doesn't exist yet, but this should still render I think if we have this running.
[00:09:58] MPM run start or dev rather. So, now you should be getting a drop down here, which is cool. And then quickly, let's drop in our third dropdown which is gonna be for breeds, basically the same logic. Make a const breed, set breed equals use state like that. And then, just for a moment, we're gonna set the breeds later because that we have to like adjust the breeds based on what the animal is contextually.
[00:10:43] Just make it an empty array for the second and then we can code it as if it's there and then later we'll go back and fill that in with like read breed information. Okay, and you can basically just copy and paste this whole label. By the way anytime that you find yourself doing this this something should go off in your head cuz this could be a component, right?
[00:11:06] These have a little bit different logic in terms of how they're populated. So, for now, we're just gonna leave them that way but you could definitely break this into a different component. For this one that we copied and pasted, I just did it underneath it, we're just gonna change basically everywhere says animal to breed Okay, for the on change and on blur, we're just gonna have the sete.breed e.target.value to breed.
[00:11:42] And then instead of animals here, we're gonna have breeds. So, you could have this just be breed here but the problem is with that is like it does work but it gets ambiguous of which breed you're talking about. So, let's just call this like all breed or something like that.
[00:12:00] I don't know, something though that refers to the fact that it's not the same breed as above. So, as of right now, there's nothing in this, so it's not gonna be anything, right. But if I had like, poodle, And be shown in here. I just wanted to be clear that this breed are not the same breed, different breeds.
[00:12:41] And I guess technically I did it here as well with this animal. So, I don't know, you can call it breed too. Maybe I'm just worried about nothing.
>> What's the option on line 57 doing?
>> Let me go back there. Line 57 option. So, what I want is, when you come here, I don't want anything to be selected, right?
[00:13:06] So, if you inspect this, I'm sure someone else has the same question. So, that's why I'm answering it for you. Notice that this is empty. There's an empty option here, which is refers to the first one selected. So, our form doesn't do anything yet, but now we have a fully functional form that you can set alt lake city in here, you can set dog.
[00:13:26] And then if there were any breeds, like to be able them. We're gonna make a custom hook here in just a second to allow someone to get all the breeds but for now we'll pause for a second. So, we've completed everything up to now through 04 dash hooks.
[00:13:44] If you fall behind or you wanna see the complete code, please feel free to head over there and, yeah.