Complete React Tutorial (& Redux) #16 - Conditional Output

Key Takeaways

all right then gang so in this video I want to show you how to output something conditionally because sometimes we only want to show something on a web page to a user based on certain conditions for example only show something to a user if they are logged in or only show a user a discount if five items are more are added to the shopping basket so we'll look at how we can conditionally output content dependant on something in our ninja data that we receive as a prop right here so say for example I only want to output the ninja if their age is over 20 now that would be true for these two right here but since this is not over 20 we wouldn't want to output that so we're conditionally outputting something based on the data that we have right now there's a couple of different ways we can conditionally output something we could use an if statement to do that or we could use a ternary operator and I'm going to show you both different examples but we'll start with the if statement so right here when we're mapping through the original data ninjas and we're returning the new list we want that new list to contain only the ninjas whose age is over 20 so what we could do is we could just place an if statement above this return statement and we'll say if ninja age is over 20 then we're going to return this JSX right here so let's close that off like so and else what we're going to do is return null so what only returning some junior sex code if the ninja age is over 20 so let's see if that works let's go to the browser now and check this out and we can see that now we're only showing those two ninjas the one with the age of 20 is no longer showing so that's cool right now the other way to conditionally output something is by using the ternary operator in JavaScript so I'm going to show you that now so what I'll do is just comment this stuff out right here like so and I'll come on to that and this time I'll say Const ninja list is again going to be equal to ninjas map and we're going to take our ninja each time around pass that through into the arrow function but this time what we want to do is use the ternary operator instead to check whether we should output something or not now the way a ternary operator works in JavaScript is as follows we have first of all a condition which is going to evaluate to true or false where you place a question mark after that and then we have to return values here we have want return value which returns if it's true that condition then a colon and then the second return value which returns if that condition is false so this condition right here this is going to be the ninja age over 20 so this right here this statement is either going to evaluate to true or false if it if ru8 to true then we're going to return this stuff right here if it evaluates to false or return this thing right here now if it's false we just want to return null don't we because we don't want to output anything now we need to return this value inside here because remember but inside the map function and each time around it's expecting a return value and that return value exactly going to be this stuff in here this JSX we're about to put in here or null so let us now go inside here and add that JSX so it's just this stuff right here this is the JSX we want to return so let's copy it and paste it inside here and scoot that back like so we don't need these things so let's get rid of those like that and let's just neaten this up a little bit all right cool so now what we're doing is returning this JSX if this is true and this if it's false so let's see if this works so save that and view this in a browser and we can see this still works so there's two different methods they're using an if statement which is sometimes a bit simpler to grasp it first or using a ternary operator which I think sometimes leads to leaner coat now I just want to show you one more thing because we can't actually do all of this inside the template we turn right here if we want to I prefer to do all this stuff above but some people nest it directly in the template instead so what we could do is grab all of this stuff right here we're going to cut that and instead of outputting the Ninja list right here we're just going to output this stuff we've just got directly inside these little brackets right here because we're still outputting some dynamic code here so let's paste all that in and scoot it over to make it look a bit more presentable now we don't need this const here we don't need to define it anymore because we're not outputting if we're doing it directly so we'll just say ninjas dot map instead and we don't need this semicolon right here so what we're doing now is mapping through the ninjas and we're returning this thing right here which is either going to be this JSX or null so what only returning the JSX when the age is over 20 so now we're embedding this directly inside the returned template down here so let's save this and see if it works and yes it still does work but again I think this is sometimes a little bit confusing when you're looking at this and then you've got all the parts of the template going on as well a bit confusing I don't like that I like to do all of my kind of logic up here first of all put that in some kind of variable which we then add to the template down here and render it I think that is a lot simpler and we're kind of separating the logic from the actual template itself so it's up to you you can do both and you can choose whether to use the ternary operator or the if statement up here I think for the most part I'm going to be using this but occasionally you will see me use this as well and again for the most part I will be doing my logic up here but there we go that's how we conditionally output something to the template