 Hey, welcome to day React holiday We have learned a lot so far and I'm excited to continue still have a handful of days Now I thought I'd start by recapping some of the things that we did over the weekend Because this is the first email. I didn't email you over the weekend And I thought I would just kind of like show you some of the things that we had changed So first of all, I spent the first day just developing out this this Pokemon view and I was using the Restlet client API Explorer so to find certain data and I was using the Let's see the Nintendo or Pokemon Pokedex that they have as a reference for kind of what they use so we'll probably look at that again but for now that's just kind of Where we're at so anyway, I have I Expanded our Pokemon to you know be the name an image height weight abilities Type stats all that kind of stuff So that was the first thing I did the second thing that I did was to Change up our collection resource just a little bit so that instead of having instead of putting the ID instead of doing all of that in our list and having it only available in this component What I did was I moved that up where we were basically returning a new Pokemon object with an ID I'm I moved that up into the resource which has some benefits the first being that Now anytime I use this resource or try to pull that value from these values from cash Those IDs are already there, which is great, and it's not doing that read It's not making new objects every time we render a list item So that's great. I mean I can't say for sure what the the performance dynamics are but It sure does feel a lot better kind of doing it right before I cash it and just reading that value instead of literally Every objects creating a new object every time we render so I assume that it's better But yeah, so we can now use this collection resource and anywhere and we're going to have that that ID associated with it so Those are the two things that I did over the weekend Now for today Now that this Pokemon view is fleshed out At least a little bit and there's a lot more data It's it's getting harder to actually see this list that we can navigate through So what I'd like to do in in the pokedex that I I saw it had a big list and then it Allowed you to click and it would show like a the detail page, right? I'd like to mimic that behavior and for that I'm going to use a ternary to basically say like if we have a Pokemon ID Show the detail page and then in order to get back I will set the Pokemon ID to zero or a negative number Traditionally we would do this with routes I'd like to leave routes out of the conversation for right now because this this is totally focused on React but traditionally we would we would do a route for something like this But I want to show you just kind of a purely react based solution And I want to show you how to use a ternary so a ternary operator is a lot like an if If else statement, right? So you might have something like if some condition You would open that up and then you would do something When truthy so this would be the truthy case and then if you have an else well that would be the do something Else When fall see okay, so this is I mean this is a pretty common if else scenario sorry, it's it's a I'll do that to make that error go away Just more errors. Anyway, we can there's a ternary Which is really fascinating and it reduces all of the syntax And the ternary looks like this so if I want I can do something like So we can take this off that goes away And we just replace this with a question mark now the question is the truthy condition so just like our if and then we're going to replace this with a colon and Delete that delete that and that's what we get now the cool thing about this is that we can this is This is an expression so it's assignable right so we could say let clapping So clapping equals happy and knows it Question mark if true then well or if in the true case we'll assign this to true So now clapping is true in the fall see case. We will sign Falsy false to to clapping now these don't have to be true and false We can do we can do any anything in here The thing the reason that this is important is because you don't have you don't have if else's inside of JSX You can use them obviously anywhere that you have JavaScript, but when we're in this return and we're returning react elements We can't we can only use expressions Now one of the most popular expressions is that ternary operator. There's also the and you can use like and and short circuiting or or You can use a lot a lot of stuff However in this case we do want to have like if else condition and that'll look something like this so We'll open up our interpolation inside of JSX so we can write JavaScript and Let's see. What will our condition be? So right now we have a Pokemon ID and I think that if we don't have a Pokemon ID Or if we have a negative invalid Pokemon ID, so less than one We would like to show the list if we have an ID. Well, then we'd like to show the detail page So let's do that. Let's do that inside of our error boundary here So we'll say selected Pokemon ID question mark Okay, and in that question mark case we are going to Render this render this whole block of component This component tree and then we need to do an else so then we'll put our colon for the else and Say in the else case we want to render this one. So this whole list We end our oh, I ended too soon Cool. So now We have an ID of one So that's why right now we are seeing the detail page, but the list went away. So this is this is good We're on the right track. So if I do two, we should see ivisor And three we should see venis or perfect and if we do zero, we should see the list That's really handy. Now if I click on any of these. Oh, I guess that's still worked Okay, it's still worked Let's reset that to zero We have no way of getting back though. So this is that actually works. That's great But we have no way of backing out So we're going to use our set selected Pokemon ID function and we're just gonna add a back button so we'll put a div around this and Add a button type button I'm gonna close that up and We will add a little back hand Say back now See, let's save this. Let's put one here. And so we can see what happens So if I click that nothing happens, that's because we don't have an event handler on there We can fix that by saying On click and We will give that a function which is going to call set selected Pokemon ID and And we're going to set that to zero because zero is the one that Yeah, whatever So back now it takes this to zero now we could accidentally set it to a negative Number which is not ideal. So if I hit back, it's gonna break. So Let's let's do this and let's say Selected Pokemon is greater than one Greater than zero. So now any any Invalid or negative number below is going to show the list anyway So that's cool. So we'll set this to zero and Yeah, so now we can go back. We can click on another Pokemon. It'll load and go back again Clicking another Pokemon it'll load. So that's really all that I wanted to show you today was just how to use a ternary operator to or yeah ternary operator to To work this magic. It's very cool. If you want to learn more about ternaries you can go to mdn and Look up the ternary operator or conditional operator I think this is this is new. So that's interesting Yeah, so I hope that that was helpful Try, you know using this a couple other places. This is something that I use Almost constantly the ability to present one UI or the other based on internal state. So Good luck. Have fun and I'll see you tomorrow