ReactJS Tutorial - 16 - Conditional Rendering

when you are building react applications you may often need to show or hide some HTML based on a certain condition luckily conditional rendering in react works the same way conditions work in JavaScript we have four different approaches and we will take a detailed look at each one of them we have defaults element variables ternary conditional operator and short-circuit operator let's begin with the if-else approach I'm going to go back to vs code and first I am going to create a new file called user greeting dot Jas within the file I'm going to create a class component using the react snippet RCE and I will remove the named export in the JSX I will simply return welcome vishwas in the app component I will include the user breeding component again make sure to import it at the top now if I save the files and take a look at the browser you should be able to see the message welcome vishwas let's go back to the user breeding component and make some changes I'm going to begin by adding a constructor with the snippet our Const within the constructor call super and then define the state I am going to create one state property called is logged in and initialize it to false in the JSX i am going to add another message that says welcome guests so first let's add parentheses and an enclosing div tag move welcome vishwas inside the div tag and also add another div tag that says welcome guest now what I want is the message to be conditionally rendered based on the East logged in state if I am logged in the message welcome vishwas should be displayed and if I am not logged in the message welcome guests should be displayed let's see how to achieve that with the first approach that is using the if-else condition in the render method let's add the if-else condition if this dot state dot is logged in so if I am logged in I need to render welcome vishwas so we are going to have a return statement a div tag then welcome vishwas and the else condition that is if it is not logged in so else you are going to return hell on disease div tag welcome guests and of course I'm going to comment out the return statement that we had before if I now format the code you can see the if-else rendering if this state is logged in returned welcome vishwas else return welcome guest now if we take a look at the browser you can see the message welcome guest is displayed and that is because he's logged in is set to false if I now change it to true and take a look at the browser you can see that the message welcome vishwas is displayed now you might be thinking there's a lot of repetition and the render method looks crowded can we not simply use the Phils condition on the message being displayed the answer is no default statements don't work inside the JSX that is because JSX is just syntactic sugar for function calls and object construction adding if else statements within the JSX is not valid that is the reason we have if else statements outside the JSX and the entire return statement containing the chair sex is placed inside the if or else block now a better approach is the second approach of using element variables in this approach you use JavaScript variables to store elements this will also help you conditionally render the entire component or only a part of the component as well let's see how I'm going to begin by commenting the if-else blocks next I'm going to declare a variable inside the render method let message next we store the appropriate element in this variable based on the condition so if this dot state dot is logged in message is going to be equal to a div tag that contains the text welcome vishwas else message is equal to a div tag that contains the text welcome guests and finally we return this message variable in the JSX so return dip tag and within curly braces the variable message if we now save the file and take a look at the browser you can see that we have the same result welcome Bishwas is displayed change is logged in to false and the message welcome guest is displayed so message is the variable which stores the element to be rendered and hence this is the element variable approach now although this approach looks much better the third approach is even more simpler and this approach uses the ternary conditional operator the benefit of this approach is that it can be used inside the JSX so I'm going to comment out what we have done with the second approach and now within the render method I'm going to add the return statement and within parentheses we use the conditional operator this dot state dot is logged in question mark a div tag that says welcome Vishwas a colon and then again a div tag which says welcome guest now how does this work the first operator this dot state dot is logged in is evaluated to either true or false if it is true the second operator is returned in our case the div tag welcome Vishwas if the first operator turns out to be false then the third operator is returned in our case a div tag that says welcome guest I've just formatted the code and you can see the conditional operator if this dot state dot is logged in is set to true welcome Bishwas is returned if it is false welcome guest is returned now we have is login set to false so if I go back to the browser you should be able to see the text welcome guest I change it to true and you should be able to see welcome vishwas so this is the ternary conditional operator approach and is probably the approach you might want to follow most of the time keeps the code simple and readable all right the final approach is the short-circuit operator approach and this approach is just a specific case of this ternary operator approach that we have just learned when you want to render either something or nothing you make use of the short-circuit operator for example right now we return either welcome vishwas or welcome guest based on the ease logged in value now let's say if the user is logged in I want to display welcome vishwas and if the user is not logged in I want to render nothing onto the screen so based on is logged in render either welcome vishwas or nothing to do that we simply return this dot state dot is logged in and % & % div tag welcome vishwas so what happens here is the expression first evaluates the left hand side of the operator this dot state dot is logged in if it is true it also evaluates the right hand side which in our case is the JSX that will be rendered in the browser however if at all the left hand side evaluates to false the right hand side will never be evaluated as it doesn't affect the final value of the whole expression and make sure to add the return keyword at the beginning of the statement so return this dot state dot is logged in and welcome Bishwas so if is logged in is set to true in the browser we should have welcome Bishwas being displayed and if i change it to false nothing is rendered in the browser so these are the four approaches to conditionally render UI in react we have defaults element variables conditional ternary operator and the short-circuit operator for most of the cases I recommend you stick to either conditional operator or the short-circuit operator they tend to be much more clean and readable all right in the next video let's take a look at rendering a list of elements in react thank you guys for watching feel free to subscribe and I'll see you guys in the next one

Channel: Codevolution

Views: 256,846

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js, Conditional Rendering, if else, ternary operator

Id: 7o5FPaVA9m0

Length: 11min 46sec (706 seconds)

Published: Mon Dec 10 2018