Conditionally Render a Component in React

In React, or any frontend framework, oftentimes you'll need to conditionally render one or more components or some HTML. There are a number of ways to achieve this, a few of which we'll see here.

Ternary Operator

If you want to handle the conditional statement within the JSX code, then using the ternary operator might be your best bet. This is done by checking the condition and then "returning" the appropriate component depending on the result. You can see an example of this here:

import React from 'react';

export default function Greeting({user}) {
   return (
       <div>
           {
               user === null ? <h1>Hi there!</h1> : (
                   <>
                       <h1>Hello {user.name}</h1>
                       <h2>You last logged in {user.last_login_at}</h2>
                   </>
               )
           }
       </div>
   );
}

In this example we conditionally render a more detailed greeting if the user object is provided. Notice that with the ternary operator we can return a single element without any extra syntax, whereas returning multiple components requires both the parentheses and fragment tags.

This approach is commonly used when the two different components being returned are not very long. If one of the code blocks being returned was many lines long then it might become difficult to read and follow.

If/Else

This case is useful for when it's difficult to compute the conditional inline with other JSX, or if the resulting JSX code is very long. Instead of computing the conditional directly in the JSX, it's done beforehand in the regular JS code:

import React from 'react';

export default function Greeting({user}) {
   let helloComponent;
   if (user === null) {
       helloComponent = <h1>Hi there!</h1>;
   } else {
       helloComponent = (
           <>
               <h1>Hello {user.name}</h1>
               <h2>You last logged in {user.last_login_at}</h2>
           </>
       );
   }

   return (
       <div>
           { helloComponent }
       </div>
   );
}

This also has the advantage of keeping the returned JSX much cleaner and easy to follow.

Logical AND (&&)

The ternary operator and if/else statements are great if you need to render one component or another. But if you need to conditionally render only one component, then you can use the logical AND operator (&&) to do that.

import React from 'react';

export default function Greeting({user}) {
   return (
       <div>
           {
               user && <h1>Hi there {user.name}!</h1>
           }
       </div>
   );
}

This achieves the same result as the ternary operator and avoids an unnecessary "else" case that returns empty tags.

Switch Case

For cases in which you need to check many different conditions, a switch statement might be more suitable. This is more difficult to put inline with JSX code, so it's often done in plain JS above the return statement.

import React from 'react';

export default function Greeting({user}) {
   let helloComponent;
   switch (user.role) {
       case 'admin':
           helloComponent = <div>Click <a href="#">here</a> for the admin dashboard.</div>
           break;
       case 'user':
           helloComponent = (
               <>
                   <h1>Hello {user.name}</h1>
                   <div>Click <a href="#">here</a> for account settings.</div>
               </>
           );
           break;
       default:
           helloComponent = <></>
   }

   return (
       <div>
           { helloComponent }
       </div>
   );
}

As you can see, while it does allow for easily handling many different cases, it's also much more verbose than the ternary operator.