 Hello, I'm Chanatastic and today is day number 25 of React Holiday, our 25 day crash course through React. Now, right now we have a little bit of a problem. And as soon as I hit the last Pokemon on this collection, if I hit next again, everything breaks. And it didn't just not show a Pokemon, it actually broke. So the button disappeared and everything. It'd be nice if we could conditionally render certain components based on whether or not we have data to actually show. So here's our Pokemon component. And I'd like to wrap that inside of a condition. Now, inside of JSX, we cannot use if else statements. Fortunately, JavaScript gives us another syntax like a one liner syntax for for conditionals. And it's called a ternary operator. Now anytime we want to use an expression inside of JSX, we need to use curly braces to interpolate it. Now a ternary operator looks like this condition, question mark, what happens if it's truthy, and colon and what happens if it's falsely. So our condition is just going to be Pokemon. If we have a Pokemon, we want to render a Pokemon. So the truthy case is going to be this Pokemon, we can paste JSX right in here, delete that. And the falsely case can also be JSX. So we'll use a div that says no Pokemon for index. Okay, format and save. Now, as we hit the end, we see this message no Pokemon for index, cool thing, we can actually do more interpolation. So even though we're interpolating this whole expression, we can also interpolate a value here. So index, index, and we'll use the index value that we're getting from state. So next, next, next, no Pokemon for index three, boom, four, five, six. Now you know how to conditionally render something inside of JSX.