[React] Display Cases

Multi-Conditional rendering with switch case

There are many ways to conditionally render components in React.js

There are also many ways to achieve multi-conditional rendering with components.

One of my go-to methods is to use a switch cases. This is not a replacement for React Router, but more of a way to conditionally render multiple components within a route/component with out changing the route itself.

I will explain things as we go along, but the goal of this example is to just have our webpage display 5 different components based off 5 different state changes, which a user changes on a button click, as seen below:

We will start this example by simply running:

npx create-react-app display_case_example

This will get our basic framework set up. We do not need any extra libraries to get things working since the main part of what we are writing is pure JavaScript.

Make sure everything is working by typing

npm start

into your terminal. You should be getting the spinning react logo with a link to “Learn React” at the bottom of your screen.

Once create-react-app completes, I usually like to start by doing some clean up in App.js.

This includes converting App.js from a functional component to a class component (since we will be manipulating state), using ES6 syntax, and removing some other things as well. I am also going to put a fragment and some text in our return, just to make sure everything is working:

If we check our browser, we should now just have “Index Test Template” rendering into our browser in the top left corner of the web page.

I am also going to remove everything in our App.css file and replace it with some classes. This is mainly for formatting/legibility purposes:

and wrap everything in our return in App.js into our new css elements:

Our page should now look like this:

Great. Let’s start reacting.

I am going to create the 5 components we want to conditionally render, and put them into a folder called “components”:

Then, I am going to import them into App.js:

I am going to make all 5 of these components class components since I will not be altering state in any of them. They should all look like this, with the only difference being the name of the component, and what they will be returning:

If we replace “Index Test Template” with one of our components, it should render without a problem:

Nice!

Let’s set up our state and give it a key of “display.” This is what we will be manipulating to change what is being displayed on the web page. We want to base our state changes off of what button we click.

But for now, I am going to set it’s value to “index” and also create another component called Index.js. I also want to set it up the same way we set up our other components and put it into our return for now.

This is what will be render on initial page load.

/components/Index.js:

App.js:

Browser:

Next, I am going to create the 6 buttons we are going to use to conditionally render the different components. I am also going to put them into an array in our render function. React will get mad at your for doing this since you are not providing a key with each element. But this doesn’t actually matter since we are just grouping JSX objects together.

So Ignore React. Trust me on this one.

We are also going to give each button an onClick listener which will call back to a function within App.js:

Our onClick callback functions, which will eventually be manipulating our state, should also look like this:

We can refactor these buttons to callback to one singular function, but for now let’s keep things imperative.

We also do not need to have our onClick listeners call back to different functions within our component and just invoke an anonymous function within the button, but I have gotten into a habit of always sending my onAction listeners callback to functions within components.

This is also how you can have an onAction listener execute multiple callback functions with a single click, which has proven to be extraordinarily useful since I started learning React.

Either way, we should now have all 5 buttons, as well as our Index component rendered on our page:

Let’s add a console log test to each onClick function in order to make sure they work:

Here’s what we should be seeing when we click each button (don’t mind the errors, we will fix most of them):

Now, let’s replace our console logs in our onClick functions with state changes to our display key. This should change our display state every time we click a button. Let’s also move our console log to our render() and console log our state. This should now accurately log our state changes on every click:

Once again…yes, we can refactor this so that it only utilizes 1 displaySwitch function and we don’t repeat ourselves, but for the sake of clarity and brevity, I am going to keep things as is.

Our webpage should now function as seen below, with our console log reflecting that it is properly displaying our state changes on line 59:

Great. Now that we have our buttons changing state appropriately, we can implement the core element in this blog post:

The Switch Case

Or what I like to call it: The Display Case.

Technically, the Display Case is an anonymous function within our return that invokes a switch case function. We can interpolate this function and conditionally render different components based off the state our buttons are setting when we click them.

Let’s start by replacing our <Index /> component in our return with an interpolation of our Display Case. For now I will comment everything out, and explain the 3 main parts of the Display Case. Then I will replace everything as needed, and comment the Display Case back in:

The first part:

This is where we declare the state key that we are manipulating in order to change what our webpage is rendering. This is not limited to just using something called “display”, and can be any state key you are changing (for example, a JWT token being received from your server)

The Second part:

This is what we are changing our state to. So if we click a button, and change our state to something, our render will return the component we put here. The case we are declaring must match the state we are setting in the function we are calling back to with our onClick listener.

The Third part:

This is our default argument. In our example, we will be setting this to index. This is not completely necessary and most of the time can be left at null, especially if we setting our initial state to “index.”

But I generally like setting it to a component I want the display case to fallback on in case of errors. So, for this example, want our page to display our index page on page load, so just in case, we will set our default return to our index component.

With everything replaced, our switch case should look like this:

Our browser should now display each individual component based off the button we are clicking, which is changing the state for our App.js:

Awesome!

One last look at our App.js file, and it should look like this:

This is an extremely simple example, but the core idea behind Display Cases allows you to conditionally render pages within a route, without having to change your route.

For example, if you have a User’s Profile page and you want to have tabs that display different things like My Information, My Settings, My Messages, or My Comments, utilizing a Display Case allows you to do so without switching to different routes.

This is also an approach to in-component multi-conditional rendering and can be nested within child components.

The only problem is you need to pass callback prop functions down to your children that change the display of your parent components, which can get messy if you are not using redux and find yourself 4 or 5 components deep.

Again, this is not a replacement for React Router, but a way to keep your routes clean and effective, and allows you to conditionally render components based off an infinite amount of state changes within a route/component.

Keep Fighting the Good Fight.