React Conditional Rendering

Conditional Rendering in React

In React, conditional rendering is the capability to display different elements depending on specific conditions or logic. It essentially enables you to manage what is shown on the screen based on your component’s state, user interactions, props, or any other variable factor.

Similar to JavaScript, where you employ if statements, ternary operators, and logical operators to determine which code executes, React enables you to choose which components, elements, or UI components to render based on specific conditions.

How to Show or Hide Content

In web development, there are instances when it’s necessary to show different content depending on specific conditions. In React, this concept is referred to as Conditional Rendering. This technique enables you to dynamically show or hide components and elements based on the state of the application, props, or any other criteria.

In this article, we will explore the different techniques for implementing conditional rendering in React, such as if statements, ternary operators, and logical operators.

Common Ways to Handle Conditional Rendering in React

Here are the most commonly used methods for conditional rendering:

Basic Conditional Rendering Using If-Else
Conditional Rendering with Ternary Operator
Rendering Components Conditionally
Logical AND (&&) Operator for Conditional Rendering
Returning null for Conditional Rendering

Basic Conditional Rendering Using If-Else

One of the easiest methods for implementing conditional rendering in React is to utilize standard JavaScript if-else statements. You can incorporate if statements inside the render() function or within a functional component to determine the content that will be shown.

Code Explanation:

React: To write JSX code (a syntax extension for JavaScript, you need to import React that lets you write HTML in JavaScript). This is required for the component to function properly.
useState: A hook that enables state management within functional components. The useState function provides access to state as well as a method to update it.
Function DisplayMessage(): This is a functional component. In React, a component is a function that returns JSX (HTML-like syntax).
const [isLoggedIn, setIsLoggedIn] = useState(false): Initializes the state isLoggedIn with the default value of false. This state will track whether the user is logged in or not.
handleToggle Function: A function that switches the value of isLoggedIn when invoked. If the user is currently logged in (isLoggedIn = true), it will update to false (logging out), and the opposite will occur if the user is logged out. This toggling is accomplished through the setIsLoggedIn function.
The conditional check is used to set the message variable. If the user is logged in (isLoggedIn is true), the message becomes “Welcome back, User!”. If the user is logged out (isLoggedIn is false), the message will be “Please log in to continue”.

Conditional Rendering with Ternary Operator

A ternary operator provides a brief and concise method for expressing conditional logic in just one line. It is particularly useful for straightforward conditions and can enhance the readability of your code when managing short conditions.

Format to use Ternary operator:

condition ? expression_if_true : expression_if_false;

Example:

How it works:

The ternary operator is used in two places:
- To change the button label based on whether the user is logged in or not.
- To render either the “Welcome back” message or the “Please log in” message.
This is a compact and clean way to handle conditional rendering in React.

Rendering Components Conditionally

In React, conditional rendering goes beyond merely showing content based on conditions; it also enables the rendering of entire components conditionally. This feature gives you the ability to dictate which components are shown in your user interface depending on user interactions, application state, or properties.

Example:

How it works:

HomePage and LoginPage are simple components representing different views that depend on the user’s login status.
The App component manages the login state (isLoggedIn) using the useState hook.
A button is used to toggle the login status, and the component conditionally renders either the HomePage or LoginPage based on the isLoggedIn state.

Logical AND (&&) Operator for Conditional Rendering

A common pattern in React involves utilizing the logical AND (&&) operator for rendering based on conditions. This technique is typically employed when you intend to display an element only if a certain condition holds true. If the condition evaluates to false, React will bypass it and produce no output.

Example:

How it works:

Initially, displayMessage is false, so the paragraph (<p>This is a conditional message!</p>) is not displayed.
When the user clicks the button, setDisplayMessage(!displayMessage) toggles displayMessage to true, causing the component to re-render, and the message becomes visible.
If the user clicks the button again, the state displayMessage is toggled back to false, and the message disappears.

Returning null for Conditional Rendering

In React, returning null for conditional rendering indicates that you consciously want to display nothing in specific circumstances. This can be beneficial when you wish to selectively hide a component or a section of the interface depending on certain state or props.

Example:

In this case:

Initial state: When the component first loads, displayMessage is false, so the paragraph is not displayed (since the ternary operator returns null).
Click the button: When the user clicks the button, displayMessage toggles to true, and the paragraph “Returns nothing if false!” appears on the screen.
Click the button again: Clicking the button again toggles displayMessage back to false, causing the paragraph to be removed from the screen (because null is returned and rendered).

Conclusion

Conditional rendering in React is an effective method that enables you to control which content is shown depending on certain conditions. Whether you’re switching between two components, employing a ternary operator for concise syntax, or merely showing and hiding elements based on state, React simplifies the integration of this feature.

Key Techniques:

If-else statements for basic conditional rendering.
Ternary operators for inline conditionals.
Logical AND (&&) operator to render content only when a condition is true.
Returning null to render nothing.

By mastering conditional rendering, you can create dynamic, interactive user interfaces that change based on user input, application state, or other conditions.

Request more information

React Conditional Rendering