Conditional rendering refers to changing the behavior of an app based on its condition. For example, you can change your React app’s greeting message to dark during the night. This way you have a different display message depending on the time of day.

Conditional rendering allows you to render different React components or elements when a condition is met. In this tutorial, you are going to learn about the different ways you can use conditional rendering in a React.js application.

Ways You Can Implement Conditional Rendering

To get going with these examples, you need to have a basic understanding of how React works. If you’re struggling in that situation, don’t worry—we’ve got a helpful guide for beginners to React.js.

using conditional statements

Like JavaScript, you can use conditional statements like if…else to create elements when certain conditions are met.

For example, you can display a specified element in an if block if a condition is met, and a different element in another block if the condition is not met.

Consider the following example which displays a login or logout button based on the login status of the user.

Alternatively, you can use the ternary operator. The ternary operator takes a condition which is followed by the code to be executed if the condition is false followed by the code to be executed if the condition is false.

The ternary operator makes the function cleaner and easier to read than if…else statements.

declaring element variables

Element variables are variables that can hold JSX elements and can be presented when needed in a React app.

You can use element variables to render only a certain part of the component when your application meets specified conditions.

For example, if you want to present only a login button if the user is not signed in, and a logout button if the user is signed in, you can use an element variable.

In the above code, first login and logout button components are created then <dashboard /> component is defined to render each of them in different positions.

In this component, use React state hooks to track when a user is logged in.

Now, render either the <LoginBtn/> or <LogoutBtn/> component depending on the state.

If the user is not logged in, render the <LoginBtn/> component otherwise render the <LogoutButton/> component. The two handle functions change the login state when the corresponding button is clicked.

using logical operators

You can use the logical && operator to conditionally render an element. Here an element is rendered only if the condition evaluates to true otherwise it is ignored.

If you want to notify a user about the number of notifications when he has only one or more notifications, you can use the following.

Next, to represent an element if the logical && expression evaluates to a false value, the logical || Create a series of operators.

The following function displays the message “You have no notifications” if no notifications are passed as props.

prevent a component from rendering

To hide a component even if it is presented by another component, return null instead of its output.

Consider the following component that only renders an alert button when an alert message is passed as props.

Now, if you pass ‘alert message’ to the <alert /> component, an alert button will be presented. However, if you don’t do this, <alert/> will be null and the button will not be displayed.

Examples of conditional rendering in real life React applications

Use conditional rendering to accomplish various tasks in your application. Some of them include providing API data only when available and displaying error messages if an error is present.

Getting rendering data from an API in React

Fetching data from API may take some time. So, first check whether it is available or not before using it in your application otherwise React will give an error if it is not available.

In above function, get data from NASA Apod API using Axios. When the API responds, update the state and use the logical && operator to present data only when it is available.

display error message

In cases where you only want to display an error if it exists, use conditional rendering.

For example, if you’re creating a form and want to display an error message when a user types in the wrong email format, update the condition with the error message and use an if statement to render it. Do it.