React Conditional Rendering - Robin Wieruch

Conditional rendering in React isn’t difficult. In JSX - the syntax extension used for React - you can use plain JavaScript which includes if else statements, ternary operators, switch case statements, and much more. In a conditional render, a React component decides based on one or several conditions which DOM elements it will return. For instance, based on some logic it can either return a list of items or a text that says “Sorry, the list is empty”. When a component has a conditional rendering, the appearance of the rendered component differs based on the condition. This article aims to be an exhaustive list of options for conditional renderings in React and best practices for these patterns.

The most basic conditional rendering logic in React is done with a single if statement. Imagine you don’t want to render something in your React component , because it doesn’t have the necessary React props available. For instance, a List component in React shouldn’t render the list HTML elements in a view if there is no list of items in the first place. You can use a plain JavaScript if statement to return earlier (guard pattern):

Try it yourself by setting users to null or to undefined. If the information from the props is null or undefined, the React component returns null in the conditional rendering. There, a React component that returns null instead of JSX will render nothing.

In this example, we have done the conditional rendering based on props, but the conditional rendering could be based on state and hooks too. Notice, how we didn’t use the if statement inside the JSX yet but only outside before the return statement.

Let’s move on with the previous example to learn about if else statements in React. If there is no list, we render nothing and hide the HTML as we have seen before with the single if statement. However, you may want to show a text as feedback for your user when the list is empty for a better user experience. This would work with another single if statement, but we will expand the example with an if else statement instead:

Now, the List component renders either nothing, a text, or the list of items based on some JavaScript logic. Even though the previous example shows you how to use if else statements in React, I suggest to use single if statements every time you want to guard your main return (here: returning the list) as a best practice:

This is way more readable than the previous if else conditional rendering. All the guards are neatly aligned as single if statements before the main return statement which can be interpreted as an implicit else statement too. Still, none of the if and else statements were used inside the return statement yet.

It’s true that we can use JavaScript in JSX, but it becomes difficult when using statements like if, else, and switch case within JSX . There is no real way to inline it. Another way to express an if else statement in JavaScript is the ternary operator :

For instance, imagine your component shows either a preview or edit mode. The condition is a JavaScript boolean which comes in as React prop. You can use the boolean to decide which element you want to conditionally render:

The parentheses () around both implicit return statements in the ternary operator enable you to return a single or multiple HTML elements or React components from there. If it’s just a single element though, you can omit the parentheses.

Note: Sometimes you want to wrap multiple lines of elements with a div element as one block though. Anyway, try to keep it lightweight. If the wrapper between the () grows too big, consider extracting it as a component as shown in the example.

The ternary operation makes the conditional rendering in React not only more concise, but gives you an easy way to inline the conditional rendering in your return . This way, only a one part of your JSX is conditionally rendered, while other parts can stay intact without any condition.

It happens often that you want to render either an element or nothing . You have learned that a simple if condition helps with that issue. However, then again you want to be able to inline the condition like a ternary operator. Take the following loading indicator component which uses a conditional ternary operator to return either the element or nothing:

This works just fine and you are done inlining the condition in your JSX. However, there exists an alternative way that omits the necessity to return null.

The logical && operator helps you to make conditions that would return null more concise. In JavaScript, a true && 'Hello World' always evaluates to ‘Hello World’. A false && 'Hello World' always evaluates to false:

In React, you can make use of this behaviour. If the condition is true, the expression after the logical && operator will be the output. If the condition is false, React ignores and skips the expression:

That’s your way to go when you want to return nothing or an element inside JSX . It’s also called short-circuit evaluation which makes it even more concise than a ternary operator.

Now there might be cases where you have multiple conditional renderings. Take for example a notification component that renders an error, warning, or info component based on a status string:

You can use a switch case operator for multiple conditional renderings :

It’s wise to use the default for the switch case operator, because a React component always has to return an element or null. If a component has a conditional rendering based on a string, it makes sense to describe the interface of the component with TypeScript:

A switch case is a good start for multiple conditional renderings. But it comes with the same drawbacks like an if else statement. A switch case cannot be used within JSX; can it? Actually it’s possible with a conditional rendering function which is self invoking:

Optionally make the switch case more concise with an conditional rendering arrow function:

In conclusion, the switch case operator helps you to have multiple conditional renders. But is it the best way to do that? Let’s see how we can have multiple conditional renderings with enums instead.

A JavaScript object with key value pairs for a mapping is called an enum:

An enum is a great way to handle conditional rendering with multiple conditions in React. They are switch case statements on steroids, because they can be used within the JSX. Let’s consider the notification component again, but this time with an enum as inlined object (inner curly braces):

The status property key helps us to retrieve the value from the object. That’s neat, isn’t it? It is much more readable compared to the switch case operator.

In this example, we had to use an inlined object, because the values of the object depend on the text property. That would be my recommended way anyway. However, if it wouldn’t depend on the text property, you could use an enum as a constant for the conditional render:

This cleans things up in the JSX. If we would still rely on the text property from before, we could use a conditional rendering with a function to retrieve the value too:

After all, the enum conditional rendering in React is more elegant than the switch case statement. Objects as enums open up plenty of options to have multiple conditional renderings. Permutations of booleans are possible too:

The last example is a bit over the top though and I wouldn’t advice using it. However, enums are one of my favorite React patterns when it comes to conditional rendering.

What about nested conditional renderings in React? Yes, it is possible. For instance, let’s have a look at the List component from before that shows either a list, an empty text, or nothing:

It works; however I would recommend avoiding nested conditional renders because they are verbose which makes it less readable. Instead try the following solutions:

Higher-Order Components (HOCs) are a perfect match for a conditional rendering in React. HOCs can help with multiple use cases, yet one use case could be to alter the look of a component with a conditional rendering. Let’s check out a HOC that either shows a element or a component:

In this example, the List component can focus on rendering the list. It doesn’t have to bother with a loading status. A HOC hides away all the noise from your actual component. Ultimately, you could add multiple higher-order components (composition) to hide away more than one conditional rendering edge case. As alternative to HOCs, you could also use conditional rendering with a render prop .

Last but not least, there are external libraries to deal with conditional renderings on a markup level. They add control components to enable conditional renderings without the JS in JSX:

Some people use it, but personally I wouldn’t recommend it. JSX allows you to use the powerful set of JavaScript functionalities to handle conditional renderings yourself. There is no need to add templating components to enable it. A lot of people consider React including JSX as their library of choice, because they can handle the rendering with pure HTML and JS in JSX.

I hope this React tutorial was helpful for you to learn about conditional renderings. If you liked it, please share it with your friends. In the end, I got an all conditional renderings in a cheatsheet for you: