 Hey everyone, welcome to day 11 I'm super excited. I Maybe a little bit lower energy today because I went on a bike ride with my brother yesterday First one I've done in like a year and he's always been like kind of the the fitter handsomer activer Activer more active brother and and so he just just totally laid me out yesterday So yeah, so I'm feeling a little low energy today, but we're gonna make it through so today is day 11 Not one tilde day lit or whatever that back tick today's day 11 and What I want to do today. I've been teasing it long enough that we're going to build a an actual Pokemon detail component now It's not gonna be super exciting what I want to show you is how to set up a resource that actually takes an ID That's our goal today is set up a a resource for an ID based endpoint So we're gonna do that right now What we're looking at is that we have we have our list rendered. So first a bit of follow-up. Ah, yes Yes follow up from yesterday. I Had said a couple things that I that were inaccurate and they were just I just they slipped my mind I just totally forgot and when I was watching the video back. I was like that that's not right dum-dum. So first of all So from yesterday, I had said that the only way to consume context in In a class component was with the render props API That is not correct actually You can also consume context in a class with this static context type That works and it's probably you know a better way, but it's limited to one You can only set you can only set one context type for a class component at least that's my understanding of it So the render props API really is the only way to consume multiple contexts in a single component So just a Clarification from yesterday, which I got that point wrong the other thing is that Let's see I There was something that I had said and this might might not be the best article for it, but um I Had I had said yesterday when I was building on this coin Yesterday this component had the you it was returning the unworded list and then it was doing this map inside of it and I had I had mentioned a couple times like now these things are kind of like coupled now that is the is going to be the case for Kind of what we're working on today at least as far as I understand but for lists you when you are using this strategy to do the render prop thing and you really can get away with not having any of the JSX markup or components in Here the reason being is that react components as of 16 2 or 3 Allow you to return arrays so we can this is a component but we can just return it an array of elements and Wrap it in a UL here the benefit of that is that maybe we have a You know, maybe we have some kind of structure that we don't actually want this in a list, right? We want it in divs or spans or like whatever Just posing a hypothetical if that's the case If the UL was baked into the component then we'd have to add some additional API to say well render this component as this type now if we want it all to be Divs without changing that component at all we can just change all of these to div You see all those dots go away and and our list is presented as divs now So that is a huge advantage To to doing it that way and something that I had honestly just forgot um, but The the point being that components can return arrays, which is amazing for this type of list Where it's now completely dynamic. There's really no opinion about what that final markup is gonna be which is awesome Okay now back into what we were talking about So right now we have the idea of the pokemon that's selected Which is great. That's all we need to make the request Cash that resource and render pokemon So let's let's start that work. Um, I am going to Just delete that. Um, hopefully it's It's saved in my little like clipboard. Who knows? Um We will make do without and we're going to in its place define a pokemon detail component Now I know That in order to have a detail like I'm gonna need the id of the pokemon that I want to show So before I do anything. I'm just gonna add this little piece of api Now I can't really I can't really do id. I mean, I guess I could but it means that I can't ever apply an id to this element so, um Thinking ahead. I'll probably do pokemon id It's it's better to be at like I think it's better to be like too overt and kind of scale it back than to try to figure out how to fix this later So we are going to use the let's see. What did we call it? In state that's referred to as selected pokemon id So that's what we want to pass down as an id Now I like starting from the implementation side because you get to get the errors and that's going to drive out Um kind of our next job if you try to build it from the component side It can be you have to hold a lot more in your head right now I have the component api that I want and the error is going to tell me what my next step is So pokemon detail is not defined. Uh, let's define that Pokemon detail I hope I spelled that right. Um And we know that we're going to take an id off of props. So that'll be um, we'll just pull that off right now and Uh, yes, it's it it's stored. Um, and the id is going to be id now Which we're getting from props. So it doesn't look like we are getting it from props. So what happened? Oh, right Now I'd like to refer to this as the id inside of my pokemon component. So I can just remap this so pokemon um id as id now, um, I can refer to it as id. This is really just a preference thing I could just take pokemon id and use pokemon id. Um It's up to you but that's That's kind of a nice a nice thing that you can do is just kind of rename these You know from what's passed in to what you want to use it as Okay, so what is next? So now we have the id. Um, what we need to do is we need to Now read from the resource. So I'm actually going to change this to um an article I think that's probably a more appropriate markup for what this will eventually become Uh, feel free to correct me if I'm wrong. I always love learning new things Now we're going to start with we need a pokemon resource And we're going to give that an id And we're going to call read on it And I know that the name is in there. So I'm going to call call name on that that that eventual object that we get back So, uh, great. We have a new error pokemon resources not defined. Um, let's go find our other resource It's going to be really similar to that um and This is going to look like Okay, so we're going to take id as an argument and then we're going to interpolate that out at the end of the url So this is now dynamic. Um, we have to change something because in the previous one I was just using double quote strings. We need to use these um these template literal strings And you can see via the highlighting that what that does is, um, if this dollar sign curly braces Um allows us to say this this value is going to be dynamic It's going to be what we get from this this function argument. Um I think that's it. So we have duplicate Declaration of oh, I need to change this we're going to take the collection out because this is not a collection Um pokemon resource is not a function Oh I've Sorry, I totally did this wrong. Um, the id needs to go in the read obviously because we're reading this id Um pokemon resource is not a function. So Sorry, it's why it's nice to have these uh, these these errors because pokemon resource literally is not a function So that's great. So we have that now and now we are fetching the name, which is great. So if I click on this um We can now we see that now that name updates that wasn't too painful. Hopefully Um, now let's go to the I have this opened up But if we visit that url, we can see that we have a huge amount of data. Um that we can now Uh use in our pokemon components. So that's awesome um That's um That's great, but it's kind of hard to parse. So, um, I wanted to show you um every I mean like firefox and chrome both have these inspectors that you can use to kind of get a better handle on huge json responses Um one I just googled this and this one seems pretty nice. Um, I you can see that there are obviously a Bunch of them. So find the one that works for you. Um, but this one's called wrestlet client and you can just add this to chrome. So, um Now I have this little bar. So if I tap that Actually, let me close this if I tap that it'll open up a new client a rest api explorer. Um, which is great Now, um, I can take the uh url that i'm interested in Uh, it looks like I already had it cashed there in my bed Um and hit send and what it will do is it gives me kind of all of the details about that request Now the nice thing is is that I can collapse all of these which is great because as you saw in the other response It was just pages and pages of these like deeply nested objects. Um, and here I can see oh, okay I have um, I have height at the the root element. I have the experience of the root element Um I d like all of these kind of things, but then if I want to explore and see what movies this character was in I can go in and do that Um, so what my encouragement to you is today is use this rest explorer Um, take this new component that we have created the pokemon detail All of the data at this end point is available to you. So, um, you know use this resource and um, Just kind of have fun with it now It's going to be really cumbersome for you if you have to type this a bunch of times So you don't have to um, we can pull this out and Say let pokemon Equal pokemon resource dot read we'll just read it at the top of that component And then we can refer to it everywhere as just um pokemon Cool. So this will be insanely valuable to you. Uh, as you start adding features You don't want to have to read from the resource every time just do it once and uh, and and and hold all those Hold that value. Um in and more easily accessible variable. So that's it. Thank you for watching. Good luck Make the best Little pokemon of you that you can imagine and uh, send it to me. Uh, I'd love to see what you come up with So, uh, good luck. I'll see you tomorrow