How does an app know to show a dashboard when I'm logged in? Better yet, how does an app know to change the appearance of a button once it has been clicked? These questions are best answered with a topic known as conditional rendering -- If this is true, then show that. The button below responds to user input as it changes colour when it's clicked. Initially, it starts as a gray colour button but then changes into a dark green button once it's pressed.

We'll be exploring the topic of conditional rendering and how we can use it to dynamically switch components within an application based on a true or false value. We're going to walk through some code examples and some interactive demo's as well. These code examples and demo's will be mainly in jsx/react but conditional rendering is a topic that exists in almost any programming language.

Let's have you click the button below to see another example of conditional rendering in action. We can see that pressing the button will change the appearance; more specifically the button goes from a circle shape to a square shape. This can be done multiple times and we will be exploring how you can achieve something like this within an application that you are building.

How does conditional rendering work?

Conditional rendering works on boolean principles meaning that if a certain condition is satisfied, then we are going to render a specific component. Conversely, if that condition is not satisfied, then a different component will be rendered -- its all one big if statement. As I alluded to above, conditional rendering can be done in almost any programming language but we are going to be looking at how to implement it in javascript and then JSX. The following is a Javascript implementation:

js
//Example 1

if (btnClicked == true) {
  btnColour = "blue";
} else {
  btnColour = "red";
}

// Example 2

const btnColour = btnClick ? "blue" : "red";

// Example 3

const btnColour2 = btnClick && "blue";

We can see that if the btnClicked variable is true then we are going to assign the btnColour a value of "blue" otherwise, btnColour gets assigned a value of "red". The other ways that we can describe this logical statement is by using a Ternary operator (example 2) or with short circuits (example 3) which are also shown above.

Ternary operator is a one-line if statement that is which is identified by a ? and :. The item to the left of the question mark is what is being tested for a truthy or falsy value while the items to the right of the question mark are the return values which are separated by a colon. The item on the left of the colon will occur if the condition is true while the return value on the right will occur if the condition is false. truthy values here : falsy values here.

The short circuit && operator evaluates conditions on the left and right hand of the &&. This operator reads from left to right, therefore, conditions have to progressively evaluate totrue for the overall statement to be true. In the case of Example 3, blue will always evaluate as true, therefore, if btnClick is true then btnColour2 will be assigned blue.

Since conditional rendering is all one big if statement, we as the developer get a choice as to how it's implemented. We can either choose to implement a block statement or we can implement an inline statement but the result remains the same. It is a writing preference, however, you will most often find that conditional rendering is written as a ternary expression as it is after all based on a true or false value -- it's easier to read.

Demo 1 & 2 explanation

In the first demo, you were able to click a button and watch the colours of the button change while in the second demo, you were able to click a button and watch as the shape of the button morphed from a circle to a square. Looking at these two examples, we are using conditional rendering to change the presence of a css class which then allows us to toggle the button between two different colours or two different shapes.

Pagination example

Most often, when you complete a form online, you find that related information is grouped. Brands do this to limit the fatigue that completing a form brings about and it further improves the user experience. The form pagination demo above is an example of this experience and it is using conditional rendering to determine which page of the form to show.

jsx
import { useState } from "react";

const app = () => {
  const [page, setPage] = useState(1);

  const onNextPage = () => {
    setPage((prev) => prev + 1);
  };

  return (
    <form>
      {page === 1 && <p>Content for page 1</p>}

      {page === 2 && <p>Content for page 2</p>}

      {page === 3 && <p>Content for page 3</p>}

      <button onClick={onNextPage}> Go to next Page </button>
    </form>
  );
};

Here we are grouping information in a form to make it easier for the user to experience our form. Based on what page the user selected, will dictate what information the user is shown. In this case, we are using short circuits && to do conditional rendering. The page that will be shown is reliant on the page state as the components to the right of && will always resolve to true. To further illustrate this, below is a demo of the code being shown above.

What else can we do with conditional rendering?

Numerous things can be accomplished with conditional rendering. Things such as:

• Showing an achievement trophy in a game/app based on whether the user earned the award

• Showing a specific module based on if the user purchased it on your course platform

• Showing login states & pagination of forms

To further illustrate this further, conditional rendering is being used on this blog website with the quiz components of this article. Here, I'm keeping track of if a user has answered the question correctly and depending on this outcome I am showing a different UI to the user. It's also heavily present in the article that you're reading (above).

To wrap up

Conditional rendering is a powerful tool that can be used to shape how you want users to experience your application. It is left up to you, the developer, to decide when and how you want to show your user's information in the application.

Hope you found this useful, don't forget to smash the like button and I'll catch you in the next one... Peace!