Conditional Rendering in React
Tags: react, javascript, webdev, tutorial
Published: 2022-02-04 22:25:25

## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement and [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_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.

```javascript
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.

```javascript
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](https://reactjs.org/docs/introducing-jsx.html) part of your component.

### Ternary Operator

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

```javascript
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.

```javascript
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.

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) statements and [IFFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) 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](https://reactjs.org/docs/conditional-rendering.html).