Conditional Rendering in React

What is Conditional Rendering?

Conditional rendering in React is a way to display components or elements based on a specific condition. It works the same as conditions do in regular Javascript. We can use Javascript operators such as the if statement and ternary operator to determine what gets rendered to the UI.

How to use Conditional Rendering in React

There are several ways we can choose to implement conditional rendering in React. The most common ways are the if statement, && operator, and the ternary operator. One way may be better suited for you over the other depending upon what your condition is and or preference.

We’ll be utilizing this App component to help demonstrate the different ways of implementing conditional rendering in React.

export default function App() {
    const [ isLoggedIn, setIsLoggedIn ] = useState(false)

    function toggleLogin() {
        setIsLoggedIn(prevState => !prevState)
    }

    return (
        <div>
            <OnlineStatus isLoggedIn={isLoggedIn} />
            <button onClick={toggleLogin}>Toggle</button>
        </div>
    )
}

if Statement

You may want to use an if, else statement when you have to decide between two or more different elements or components to be displayed.

export default function OnlineStatus({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h1>Online 🟢</h1>
    } else {
        return <h1>Offline 🔴</h1>
    }
}

This is a simple way to render the element based on the value isLoggedIn. It involves more lines of code than the other ways but it still works just fine. The caveat with this though is that you cannot use a if statement within the render and JSX part of your component.

Ternary Operator

The ternary operator in React is a more common way to decide between two options to be rendered.

export default function OnlineStatus({ isLoggedIn }) {
    return isLoggedIn ? <h1>Online 🟢</h1> : <h1>Offline 🔴</h1>
}

Just like the if statement, this will check if isLoggedIn evaluates to true then render the correct element based on its value. Unlike the if statement, it can be used within JSX and it only takes up one line of code!

&& Operator

The && logical operator may be familiar to you from regular Javascript. In Javascript, it’s usually found inside of a if statement. It will check if multiple conditions are true and run the code inside of the if block when both evaluate to true or truthy.

const condition1 = true, condition2 = true;

if (condition1 && condition2) {
  console.log("This code runs!");
}

In React we can take advantage of this when we have one condition that needs to evaluate to true in order for an element to be rendered to the UI.

export default function Mail() {
    const [ mail, setMail ] = useState(["📧", "📧"])

    return (
        <>
            { mail.length > 0 && <h1>You've got Mail! 📨</h1> }
        </>
    )
}

In this example, our h1 will be displayed only if we have more than one item contained in the mail array. It will check the condition on the left and then the element on the right. In this case, both will evaluate to true because our state contains more than one item in the array and the h1 element will always be truthy.

Conclusion

In this article, we went over what conditional rendering is and how to implement it with the most common ways it is used in React. There are several other ways to implement conditional rendering such as using switch statements and IFFEs but here we learned about the more common ways it’s used.

Using and understanding conditional rendering in React is very important because you’re likely to see it used frequently in React components.

To learn more about this concept consider reading the React docs on Conditional Rendering.