Conditional Rendering with React: The Complete Guide

Dive deep into React's four approaches to conditional rendering, then test your knowledge by building a multi-step regisration wizard.

pro
exclusive

James K Nelson

Hi! I've been playing with JavaScript for over half my life, and am building Frontend Armory to help share what I've learned along the way!

Read more by James

One of the first things you’ll notices about React is that it doesn’t have a special way to handle conditional rendering. Unlike Vue and Angular, there’s no if prop or directive.

<!-- In Vue, this div will only be rendered if `isGuest` is truthy -->
<div v-if="isGuest">
  <h1>I'm Sorry, Dave.</h1>
  <p>I'm afraid I can't do that.</p>
</div>

Of course, React does let you conditionally render elements. The difference is that with React, you don’t need any special syntax; you just use plain JavaScript. But how?

This guide will help you master the four different approaches to conditional rendering with React. By following along, you’ll learn how to simplify your logic using JSX and components, and you’ll discover which patterns are best left alone. But before we get started, let’s take a look at why React’s approach is so unique…

React elements are JavaScript objects

When working with React, you’ll often represent markup with JSX. Take the above snippet for instance (the one that apologizes to Dave). To render the same apology with JSX, you might write this:

let readerName = "Dave"
let reactElement =
  <div>
    <h1>I'm Sorry, {readerName}.</h1>
    <p>I'm afraid I can't do that.</p>
  </div>

ReactDOM.render(reactElement, document.getElementById('root'))

At first glance, it may look like there’s some HTML-in-JS hocus-pocus going on here. But the reality is much simpler: reactElement is just a plain-old JavaScript object.

When you compile JSX code, the compiler translates the JSX tags into calls to React.createElement() — a function that returns plain old JavaScript objects. You can work these objects just as you’d work with any other objects. For example, you could explore the structure of the returned Element objects using console.log().

This example displays the compiled code at the bottom left, and the console output at the bottom right. If you edit the source at the top left, the other panes will automatically update.

main.pretty.js
index.html
New
This file type is not compiled.
Build In Progress

    JSX tags become React Elements. React Elements are just JavaScript objects. And as a result, you can manipulate tags/elements using boring JavaScript features like if and else, switch.

    Want to figure out exactly what these Element objects are? Check out the free Elements (are objects) lesson from my React (without the buzzwords) course.

    Approach #1: if/else

    When you return a JSX tag from a component function, what you’re really returning is the object that was returned by the corresponding call to React.createElement(). JSX is just JavaScript… and like any other JavaScript code, you can add control statements!

    For example, say that you’re building a clone of this website. You’ve put together a <Lesson> component that renders a single lesson, but showing lessons to just anyone isn’t going to work — you want to fund more and better lessons! So you only want to render the lesson when the current user is authenticated…