7 Simple Ways to Conditionally Render Components in React
Showing a red username for user type A, a blue one for user type B, or showing dashboard for only logged-in user. Displaying different UI according to particular conditions is the very common task required in every React project.
How can you do this? I bet you have your solutions in mind. But do you want to know other methods? I show you some below.
The Very Basic If
The easiest and simplest way is using if.
Let’s say you don’t want to display a block of content because of null data or something like that. Using if is the first thing you can think of. For instance, if a user doesn’t exist, then return null.
Or if a user doesn’t log in yet, show him a sign in button, otherwise do nothing.
If… else…
Another usual use is if… else…
You have a list. You want to show render that list if it has at least one item. If the size of the list is zero, simply display a text indicates that there’s no data.
Ternary
I love short code. At any rate, I tend to use short code that produce the same result as seem-professional-but-redundent code. It’s clean and concise.
Take a look at this:
Let’s transform it to a more satisfying code:
The two of code snippets above do the same thing — render a user with real data if he logged in, otherwise show as anonymous. But the second one looks shorter and more beautiful.
You see, how concise it is.
&& operator
You learned that you can render an element or nothing with the classic if in section 1 or the beautiful ternary. You think that there’s no shorter way to do this task. If it’s the case, you may not know about && operator.
Imagine you want to show a Sign in button element if a user doesn’t log in yet.
You can use if:
Or ternary:
Or &&:
&& totally defeat ternary in this case.
Switch Case
In case of there are many conditional UI, switch case should come to mind.
In the example above, we render corresponding element to the user’s type.
You can also use if/else for this case but Switch Case is more concise.
Immediately Invoked Function Expression
Self invoking function is a way to execute JavaScript code in JSX.
It means that you can write conditional logic directly within JSX. For more details, take a look at the example below:
To make it even more concise, just use arrow function:
Enhanced JSX
Some libraries allow you to add conditional logic to JSX without using JavaScript directly. JSX Control Statements is one of them. See the example below:
It’s similar to Switch Case but in a more component-like way.
Now, Which One You Prefer to Use?
I find myself usually stick to if/else way. The way we read it — if <condition> then do something, otherwise do other things, it’s natural like the way we talk. That’s my coding style.
Would you stick with one like me or have criteria to choose the one that suits your case most.
A note In Plain English
Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!
