React - Introduction to Conditional Rendering. And I am Farish Kashefinejad, the Software Development Domain Lead at Cloud Academy. If you have any questions or concerns about the content in this video, feel free to reach out to support@cloudacademy.com. I will begin with a quick overview of the setup for this video. On the left is the Cloud Academy lab environment. I have an app jsx file that returns a login component. The login component returns a login button. To the right is the React development server, currently rendering the login button. As I make code changes, you may see error messages displayed on the development server. This is due to the autosave feature saving code before it is completed. So, what is conditional rendering?

Conditional rendering is the process of displaying different content on the screen based on different conditions, and this is a common practice with many programming frameworks. For this video, the conditional rendering condition will be based on state. The state will be named login status.

If the state login status is true, a logout button will be rendered on the screen. If it is false, a login button will be rendered on the screen. To begin I need to destructure use state from React. Now, I will type inside of the login function, using a destructured array syntax cons square brackets. And in this array, the first element is the name of the state, login status and the second element is the name of the method that will set that state, set login status. And I will set this array equal to U-state, and as an argument, I will pass in a default value of false. Now, the React documentation does refer to different approaches. For conditional rendering, I will use a ternary operator. So, I will begin with a jsx expression, and inside of the components return statement above the button, I will type curly braces, and inside of the curly braces, the name of the state. After login status, I will add a question mark, and the question mark is what starts the ternary operator. When using the ternary operator, whatever is to the right of the question mark is returned if the value of login status is true.

I will add a parentheses after the question mark and from below I will cut and paste the login button inside of the parentheses. Now, since this first statement after the question mark will trigger if the login status is true. I would like to show a logout button. So, I would change the login text to log out. Now, to complete the ternary operator I need a colon, and I will use another set of parentheses. When working with a ternary operator, what is to the right of the colon will trigger when the login status is false. So, I will paste in the login button and I do not need to change the text, because the login button should be displayed when the login status is false. Now that this is done, because the default value of the state is false, a login button is being rendered to the right. So, here's an easy way to test if my conditional rendering is working properly. Up above, I will change the default value of the state from false to true, and now to the right is a logout button.

But conditional rendering should be driven by something else such as a interaction on the page, and that is what I'll do next. When the button is clicked, the state will be changed and the text of the button will be changed as a result of the state changing. I will begin by creating an event handler function named handle click. Right below the state, I will type cons handlelick = <>. And inside of the arrow function, I will type setLoginStatus(). And the way this upcoming code will work if the login status is false, the handle click function will set it to its opposite value which is true. And if the value of login status is true, the handle click function will set it to false. And this is what most applications do. If you're logged in they give you an option to log out, and if you're not currently logged in they'll give you an option to log in. To make this work easily, for the argument of set login status, I will type !loginStatus. I'm using the NOT operator to set the login status to its opposite value.

If the current value is true when the click event is triggered, its value will be set to false. If the value is false when the click event is triggered, the value will be set to true. Now, I need to bind the onclick event to each button. On the logout button I will type onClick to bind this to the click event and set it equal to handle click. I will copy the onClick prop and paste it on the login button. Now, this part is complete and before I test this, I'm going to change the default value of the state back to false, and on the screen to the right is the login button. I will click the 'Login' button and it's now log out. And I will click it a couple more times, and each time the button is clicked the text of the button switches between login and logout. And here's a list of recommended resources related to the content of this video. And that's it. Thanks for watching at Cloud Academy.

React - Introduction to Conditional Rendering

About

Learning Objectives

Intended Audience

Prerequisites