Conditional Rendering in React

Conditional rendering allows for a React user interface (UI) to render different elements based on a condition. Conditional rendering is commonly used when rendering external data from an API, showing or hiding elements, and toggling application functionality.

In order to highlight a few common ways of dealing with conditional rendering, I created a test application for the purpose of practicing conditional rendering in React from which I will be providing examples of conditional rendering.

if…else

The cornerstone of conditional rendering in JavaScript is the if statement. Anytime you want to conditionally render something in React the way to start is by determining if your conditional logic can encompassed by an if statement. A common application of an if…else statement is whether to render information on the page based on if the user is logged in or not.

const isLoggedIn = true
function Account() {
    if(loggedIn) {
        return <AccountDetails />
    } else {
        return <Login />
}

In the example above, we are able to render different information to the page based on a boolean value assigned to a variable (in this case, isLoggedIn). If isLoggedIn = true the <AccountDetails /> component is return, else if isLoggedIn = false the user is return to the <Login /> component.

Another way to use the if…else statement is to selectively render a component using null.

const isLoggedIn = true
function Account() {
        if(loggedIn) {
            return <AccountDetails />
        } else {
            return null
    }
}

Here I simply return null instead of returning the <Login /> component.

Ternary Operator

A ternary operator is a more concise version of the if(else) condition, and is preferable to use in React because it can be used within a JSX return statement. The ternary is the only rendering condition that takes three operands: a condition, an if operator, and an else operator. The resulting logic is something a long the lines of:Condition ? True : False ; based on whether a condition returns true or false JSX will return the corresponding operand. Here is an illustration of what expressing the condition our <Account /> component as a ternary would look like:

const isLoggedIn = true
function Account() {
    return (
        {
            isLoggedIn ? 
            <AccountDetails />
            :
            <null />
        }
    )
}

&& Operator

The And Operator is a boolean operator that returns true if the statements at either side of the && as exemplified above, there are many situations where you would want to render either one element or nothing. To be more specific, && operator will check first if what is declared on the left side of the && returns true or false, if false it will not evaluate the logic on the right side of the &&. In React, the preferred way of accomplishing this kind of rendering is with the && operator. This is because the && operations are able to be returned by JSX. This also makes it useful using when one side of ternary operation needs to return null.

const isLoggedIn = true
function Account() {
    return (
         <div>
            {
                isLoggedIn &&
                <AccountDetails />
            }
         </div>
    )
}

Elemental Variables

Elemental variables are used to clean up code and give JSX elements a modular use by allowing elements to be declared and called on through out a component. If you need access to a conditional statement in several places throughout a component, it is possible to save its return value to a variable and call that variable where the conditional render need be applied.

const isLoggedIn = true
function Account() {      
        let element
        if(loggedIn) {
            element = <AccountDetails />
        } else {
            element = <Login />
    }
    return element
}

Using the above example as a reference, here is how we can transform our conditional statement into a module which can be deployed throughout the scope of the function.

Switch

Switch case operator allows us to have multiple conditional renders within a single statement. A switch case operator is another way to achieve an if...else operation, with the added benefit of being able to contain more than two operands within its condition.

Enumeration

Enums are a variable type which is derived from C based languages. JavaScript does not natively support enums, however there are a few ways enums can be implemented and used for conditional rendering. Enums are used to represent a condition which is dependent on more than two possible values. It is preferable to using switch cases.

Higher Order Components

Higher Order Components (HOC) are an important have several use cases for conditional rendering inside of JavaScript. One important way to use HOCs is to conditionally render the component itself. This allows for you to share the same functionality across several components. If you need to manage state across several components (for example, if a user is logged in or not) you can use a HOC to manage the state and import that HOC into each component which requires access to its functionality.