React Conditional Rendering

Introduction

In React, conditional rendering is a core concept that allows you to display different components or elements based on certain conditions or application state. This is fundamental for building dynamic and responsive user interfaces. For example, you might want to show a "Log In" button to a guest but a "Profile" page to a logged-in user.

In this lab, you will learn several common techniques for implementing conditional rendering in your React applications. We will start with a basic project setup and progressively explore different methods, including:

• The ternary operator (? :) for simple if-else logic.
• The logical && operator for rendering an element only when a condition is true.
• Using variables to store elements for cleaner JSX.
• Returning null to prevent a component from rendering.
• Using React state to create interactive UIs that change what's displayed.

By the end of this lab, you will have a solid understanding of how to control what your users see based on the state of your application.

Use ternary operator in JSX for condition

In this step, you will learn how to use the conditional (ternary) operator (? :) for inline if-else logic directly within your JSX. This is a concise way to choose between two different UI elements to render.

First, let's navigate to our project directory. All commands should be run from this directory.

cd ~/project/my-app

Next, we need to install the project dependencies.

npm install

Now, let's modify the main application component. Open the file src/App.jsx in the file explorer on the left. We will create a Greeting component that displays a different message depending on whether a user is logged in.

Replace the entire content of src/App.jsx with the following code:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>
  );
}

function App() {
  return (
    <div>
      {/* Try changing isLoggedIn to false to see the other message! */}
      <Greeting isLoggedIn={true} />
    </div>
  );
}

export default App;

In the Greeting component, the expression {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>} checks the value of the isLoggedIn prop. If it's true, it renders "Welcome back!". Otherwise, it renders "Please sign up.".

Now, let's start the development server to see our component in action.

npm run dev -- --host 0.0.0.0 --port 8080

After the server starts, open the Web 8080 tab at the top of the screen. You should see the "Welcome back!" message. You can try changing isLoggedIn={true} to isLoggedIn={false} in src/App.jsx, save the file, and watch the content update automatically in the browser.

Apply logical && operator for short-circuit

In this step, we'll explore another common pattern for conditional rendering: the logical && operator. This is particularly useful when you want to render an element only if a certain condition is true, and render nothing otherwise. In JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false. React treats false as a value that renders nothing.

Let's modify our src/App.jsx file to demonstrate this. We will add a component that shows a notification count only if there are unread messages.

Keep the development server running. You only need to edit the file and save it to see the changes.

Replace the content of src/App.jsx with the following code:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

function App() {
  const messages = ["React", "Re: React", "Re:Re: React"];
  // Try changing messages to an empty array: const messages = [];
  return <Mailbox unreadMessages={messages} />;
}

export default App;

In this example, the <h2> element is rendered only because unreadMessages.length > 0 is true. If you change the messages array in the App component to be empty (const messages = [];), the condition becomes false, and the <h2> element will not be rendered.

After saving the file, check the Web 8080 tab. You should see the message "You have 3 unread messages."

Store condition in variable and render if true

In this step, you'll learn how to make your components cleaner by preparing the content in a variable before the return statement. This approach is very helpful when the conditional logic becomes more complex than what a ternary operator or && can handle gracefully.

By using a variable, you can use standard JavaScript if statements to decide what the component should render.

Let's update src/App.jsx to use this technique. We will create a component that displays either a "Login" or "Logout" button based on a prop.

Replace the content of src/App.jsx with the following code:

function LoginButton(props) {
  return <button>Login</button>;
}

function LogoutButton(props) {
  return <button>Logout</button>;
}

function LoginControl(props) {
  const isLoggedIn = props.isLoggedIn;
  let button;

  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return (
    <div>
      The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
      {button}
    </div>
  );
}

function App() {
  return <LoginControl isLoggedIn={false} />;
}

export default App;

In the LoginControl component, we declare a variable button. Then, an if statement assigns either <LoginButton /> or <LogoutButton /> to it. Finally, the JSX in the return statement simply includes {button}. This keeps the rendering logic separate and makes the return statement easier to read.

Save the file and observe the changes in the Web 8080 tab. You should see the "Login" button. Try changing isLoggedIn={false} to isLoggedIn={true} to see the "Logout" button instead.

Render null or empty fragment if false

In this step, we will cover a scenario where you want to prevent a component from rendering at all. You can achieve this by having the component return null or an empty fragment (<></>).

This is a common pattern for components that should only be visible under specific conditions. For example, a warning banner that should only appear if there is an actual warning.

Let's modify src/App.jsx to include a WarningBanner component that only renders when a warn prop is true.

Replace the content of src/App.jsx with the following code:

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div style={{ backgroundColor: "yellow", padding: "10px", color: "black" }}>
      Warning!
    </div>
  );
}

function App() {
  // Try changing this to false to hide the banner
  const showWarning = true;

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <p>This is the main content of the page.</p>
    </div>
  );
}

export default App;

In the WarningBanner component, we check the warn prop at the beginning. If it's false, the component immediately returns null, and React will not render anything for it. If it's true, it proceeds to return the warning div.

After saving the file, check the Web 8080 tab. You will see the yellow warning banner. Now, go back to src/App.jsx, change const showWarning = true; to const showWarning = false;, and save. The banner will disappear from the page.

Toggle state to change conditional display

In this final step, we'll combine conditional rendering with React's state to create an interactive component. So far, our conditions have been based on props. By using state, we can make the component's output change in response to user actions, like clicking a button.

We will use the useState hook to manage the component's state.

Let's modify src/App.jsx to build a LoginControl component that manages its own isLoggedIn state and allows the user to toggle it.

First, you'll need to import useState from React. Replace the content of src/App.jsx with the following code:

import { useState } from "react";

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

export default App;

Here's what's happening:

1. import { useState } from 'react'; brings in the useState hook.
2. const [isLoggedIn, setIsLoggedIn] = useState(false); initializes a state variable isLoggedIn to false. setIsLoggedIn is the function we use to update this state.
3. We define handleLoginClick and handleLogoutClick functions that call setIsLoggedIn to update the state.
4. The LoginButton and LogoutButton are passed the appropriate handler function via their onClick prop.
5. The Greeting component and the button variable both depend on the isLoggedIn state, so they will re-render whenever the state changes.

Save the file and go to the Web 8080 tab. You will see the "Please sign up." message and a "Login" button. Click the "Login" button. The state will update, and the UI will change to show "Welcome back!" and a "Logout" button.

Summary

Congratulations on completing this lab on React Conditional Rendering! You have learned and practiced the most common techniques for controlling what your application displays based on different conditions.

In this lab, you have covered:

• Using the ternary operator (? :) for simple inline if-else logic.
• Applying the logical && operator to render an element only when a condition is met.
• Storing JSX in a variable to handle more complex logic with if statements, keeping your return statement clean.
• Returning null from a component to prevent it from rendering anything.
• Combining these techniques with the useState hook to create dynamic and interactive user interfaces that respond to user actions.

These patterns are fundamental building blocks for almost any React application. Mastering them will allow you to create rich, responsive, and user-friendly experiences.