7 different ways of conditional rendering in React
A conditional render in React is no wizardry. In JSX – the syntax extension used for React – the user can use pure JavaScript. In JavaScript the user should be familiar with if-else or switch case statements, because they are the one of the vital pillars for learning React. The user can use these in JSX as well, since JSX only mixes HTML and JavaScript.
But you might ask, what is conditional rendering in React? In a conditional render a component decides based on one or several conditions which elements it will return. This article aims to be an in-depth list of options for conditional renderings in React. If you know more alternatives, feel free to contribute.
1. if else in React:
function List({ list }) {
if (!list) {
return null;
}
return (
<div>
{list.map(item => <ListItem item={item} />)}
</div>
A component that returns null will render nil. However, the user wants to show a text when a list is empty:
function List({ list }) {
if (!list) {
return null;
}
if (!list.length) {
return <p>Sorry, the list is empty.</p>;
} else {
return (
<div>
{list.map(item => <ListItem item={item} />)}
</div>
2.Ternary operation in React:
The user can make their if-else statement crisper by using a ternary operation. );
condition ? expr1 : expr2
3. Logical && operator in React:
It happens often when the user want to render either an element or nothing. For instance, the user could have a LoadingIndicator component that returns a loading text or nothing. The user can do it in JSX with an if statement or ternary operation.
function LoadingIndicator({ isLoading }) {
if (isLoading) {
return (
<div>
<p>Loading…</p>
</div>
);
} else {
return null;
}
}
function LoadingIndicator({ isLoading }) {
return (
<div>
{ isLoading
? <p>Loading…</p>
: null
}
</div>
);
}
4. Conditional Rendering with enums:
In JavaScript an object can be used as an enum when the object is used as a map of key value pairs.
const ENUM = {
a: ‘1’,
b: ‘2’,
c: ‘3’,
5. Multi-Level Conditional Rendering in React:
How about nested conditional renderings? Yes, it is possible. For example, let’s have a look at the List component that can either show a list, an empty text or nothing.
function List({ list }) {
const isNull = !list;
const isEmpty = !isNull && !list.length;
return (
<div>
{ isNull
? null
: ( isEmpty
? <p>Sorry, the list is empty.</p>
: <div>{list.map(item => <ListItem item={item} />)}</div>
)}
</div>
);
// Usage
<List list={null} /> // <div></div>
<List list={[]} /> // <div><p>Sorry, the list is empty.</p></div>
<List list={[‘a’, ‘b’, ‘c’]} /> // <div><div>a</div><div>b</div><div>c</div><div>
};
6. External Templating Components:
There exist external solutions to pact with conditional renderings. They add control components to allow conditional renderings without JavaScript in JSX. Then it is not question anymore on how to use if else in React.
<Choose>
<When condition={isLoading}>
<div><p>Loading…</p></div>
</When>
<Otherwise>
<div>{list.map(item => <ListItem item={item} />)}</div>
</Otherwise>
</Choose>
7. Higher Order Components:
Higher order components are perfect match for conditional rendering in React. Higher order components can have multiple use cases. Yet one use case could be used to change the look of a component. To make the use case more precise: it can apply a conditional rendering for a component. Let’s have a look at a higher order components that either shows a loading indicator or a desired component.
// HOC declaration
function withLoadingIndicator(Component) {
return function EnhancedComponent({ isLoading, …props }) {
if (!isLoading) {
return <Component { …props } />;
}
return <div><p>Loading…</p></div>;
};
// Usage
const ListWithLoadingIndicator = withLoadingIndicator(List);
<ListWithLoadingIndicator
isLoading={props.isLoading}
list={props.list}
/>