CONDITIONAL RENDERING IN REACT

Andrew Riznyk
Nov 4 · 3 min read

You can have a lot of different components, which are responsible for different functionality of your application. However, you usually don’t render all of them to the page in the same time. Each components renders depending on the state of the app and the user interaction with it. To make the decision, which one you should render in a specific moment, you can use conditionals, but JSX doesn’t provide you with its own implementations of loops and conditionals. It is where a pure JavaScript comes to help you. The most common conditionals are:

  1. if…else conditionals;
  2. ternary operator;
  3. logical && operator.

The first one is the most simple, probably all programmers know how to use it. In React you use if/else operators in the same way like in JavaScript. Let’s set up a simple example.

import React from 'react';
import AdminProfile from './AdminProfile';
import UserProfile from './UserProfile';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
admin: true
}
render() {
if(this.state.admin) {
return (
<div>
<AdminProfile />
</div>
)
} else {
return (
<div>
<UserProfile />
</div>
)}
}

In the example we are checking if the user is an admin or a regular user. When ‘if’ block evaluates to true, then AdminProfile component will be rendered to the page or if it evaluates to false, then our ‘else’ block will be executed and UserProfile component will be rendered. This method is definitely simple, however when you want to use a lot of logic, you should structure your code or separate into different blocks, because then your render method can become overcrowded .

Second method is mostly the same like first one, just a different syntax. Instead of using if/else block we will use ternary operator. Let’s check an another example.

import React from 'react';
import AdminProfile from './AdminProfile';
import UserProfile from './UserProfile';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
admin: true
}
render() {
return (
<div>
{this.state.admin ? <AdminProfile /> : <UserProfile />}
</div>
)
}
}

Ternary operator is a shortened version of if/else block and sometimes can be confusing when you have huge logical expressions. In order to make them more readable, you can wrap each block into parentheses.

Last method, but not least, is a logical && operator. When you want to render either some component or nothing, you can use && operator. Usually the left side of && operator will be a conditional and the right side will be our component or something, which we want to output to the page.

import React from 'react';
import AdminProfile from './AdminProfile';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
admin: true
}
render() {
return (
<div>
{this.state.admin && <AdminProfile />
</div>
)
}
}

Our component will be rendered to the page just when left side evaluates to true, but if it is false, React will skip it, because then && operator won’t even evaluate the right side of our expression.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade