Everything you need to know about Conditional Rendering

One of the biggest challenges we face when building applications is making sure we render the correct components/elements for our user e.g. we don't want to show a login form to a user who is already logged in. You want this experience to be seamless and not affect the performance of your application.

Conditional Rendering in React behaves the same way as conditions in JavaScript, so once you understand conditional operators, you'll understand conditional rendering. Conditional Rendering, therefore, gives us the ability to render what we want to on the screen based on the current state of our application. Pretty great!

So let's learn the different ways we can conditionally render in React.

What you will learn#

By the end of this post you will be able to:

• Show/Hide components based on state

• Use 3 different methods in React to hide/show components

• Use shorthand to hide components

What do you need to know?#

To get the most of this article, we assume you're familiar with the component basics in React and also core JavaScript (variables, conditional statements etc). We'll also be using the basics of React Hooks.

If you do not know any of the above but would like to learn, here are some great resources:

• freecodecamp is a great free resource that will help you become an expert at JavaScript

• The React docs are great for getting started with react but to become an expert I recommend fullstack react

• React Hooks docs

Now let's get into it!

How can I conditionally render?#

Let's first look at a typical functional component:

This will return Hello World onto our screen.

How about we add a prop to this component that has a boolean called sayHello. When the boolean is true we return Hello World else we return Goodbye World. If we were using vanilla JavaScript, this would be quite difficult to achieve and we would have to toggle different styles for the component. Thankfully, React has made this much easier!

Wow, how simple was that. Believe it or not, we can even make it a little cleaner using a ternary.

If you want to play around with the above, here is a Codesandbox.

With the fundamental knowledge we need in place, we can move onto more real-world examples.

Conditional Render Login Form#

When building web applications the majority of the time we will have some sort of user authentication.

The authentication flow will generally be like:

• User visits app

• Check if the user is logged in

• if !loggedIn --> show login form

• if loggedIn --> show dashboard/home

If we were to implement this in React, it would look like as follows

So we first declare a variable in our state called isLoggedIn and this is changed using the setLoggedIn method (if you are not familiar with react hooks you can check out the docs here).

We then create a Login and Dashboard component (we have no login validation in place as we want to keep the code as minimal as possible).

I am using react-bootstrap for the styling, so we can focus on the code, you can check out the docs here.

So each component has a Button that triggers the different state for login as visualized below.

Great, we now have everything in place - I bet it was a lot easier than you thought.

Here is a Codesandbox that you can play around with.

Navigation Bar Example#

Let's look at a different example where instead of hiding an entire component, we can hide just a small part of a component.

It is very common when building a web application to hide some features to certain users, let's imagine we have a navbar like so:

This navbar has an admin item that should be only visible to admin users. Our navbar component will accept in a prop to let the component know if the user is an admin or not.

We can now do a nice little trick now using a double ampersand.

We can conditionally render using a double ampersand which basically says if the value on the left is true then show the content on the right.

In react terms our nav component looks like this:

The key line above is:

Again, we can see how easy react makes it for us to hide and show components.

Here is the codesandbox so you can play around with the above example.

Toggle Component#

The final component we will look at is a toggle component, it is quite common for the user to have the ability to show hide extra information on a web page.

This could be on the click of a button that will show this extra information, the component could look like as follows:

Like above we are using useState to manage the state and on the click of our button, we update the state.

We are then using our showInfo state to decide whether we should see the extra information or not:

If we were using vanilla JavaScript we would need to toggle hide and show classes on our p element which can become quite cumbersome, you can see how React removes this pain for us,

Conclusion#

Today we learned that Conditional Rendering in React behaves the same way as conditionals in JavaScript, we also went through the different methods we have at our disposal for conditional rendering.

If you're interested in learning further, the React docs has a great section on conditional rendering.

Have a great day.