Everything you need to know about Conditional Rendering

 in React and the different methods we have at our disposal to achieve this.

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.

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

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:

Let's first look at a typical functional component:

const MyComp = () => { return ( <div>Hello World</div> )}

 to this component that has a boolean called 

.  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.

const MyComp = ({ sayHello }) => {
  return (
    <div> {sayHello ? "Hello World" : "Goodbye World"}</div>
  );
};

<MyComp sayHello={true} />;
// <div> Hello World </div> is rendered

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.

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

The authentication flow will generally be like:

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

export default function App() {
  const [isLoggedIn, setLoggedIn] = useState(false);
  return (
    <div className="App">
      {!isLoggedIn ? (
        <Login handleLogin={setLoggedIn} />
      ) : (
        <Dashboard handleLogin={setLoggedIn} />
      )}
    </div>
  );
}

So we first declare a variable in our state called 

 method (if you are not familiar with react hooks you can check out the 

 component (we have no login validation in place as we want to keep the code as minimal as possible).

 for the styling, so we can focus on the code, you can check out the 

 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.

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:

 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.

<ul>
  <li>Dashboard</li>
  <li>Link</li>
  <li>{isAdmin && Admin}</li>
  <li>Users</li>
</ul>

We can conditionally render using a double ampersand which basically says if the 

 on the left is true then show the content on the right.

 terms our nav component looks like this:

const MyNav = ({ isAdmin }) => {
  return (
    <Nav activeKey="/home">
      <Nav.Item>
        <Nav.Link>Dashboard</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link>Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        {isAdmin && <Nav.Link>Admin</Nav.Link>}
      </Nav.Item>
      <Nav.Item>
        <Nav.Link>Users</Nav.Link>
      </Nav.Item>
    </Nav>
  );
};

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.

The final component we will look at is a 

 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:

 to manage the state and on the click of our button, we update the state.

 state to decide whether we should see the extra information or not:

If we were using vanilla JavaScript we would need to toggle 

 element which can become quite cumbersome,  you can see how React removes this pain for us,

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 

AUTHOR

Paul Ryan

In this post, we will be discussing conditional rendering in React and the different methods we have at our disposal to achieve this.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Everything you need to know about Conditional Rendering

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript