Conditional Rendering and Lists

Introduction

In the previous lesson, you learned how to manage data using state and respond to user actions with events. Now, we move to another important concept — controlling what appears on the screen.

In real-world applications, the UI changes depending on conditions. For example, you might show a login button if the user is logged out, or display a dashboard if the user is logged in. You may also display messages like "No items available" when a list is empty.

To build such dynamic interfaces, React provides two important techniques:

• Conditional Rendering – showing UI based on conditions

• List Rendering – displaying multiple items from data

Together, these allow your application to respond intelligently to data changes.

What Is Conditional Rendering?

Conditional rendering is the process of displaying different UI elements based on specific conditions. Since JSX allows JavaScript expressions, we can use normal JavaScript logic inside our components.

You can use:

• Ternary operator (? :)

• Logical AND operator (&&)

• If/else statements

Using the Ternary Operator

The ternary operator is useful when choosing between two UI outputs.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Welcome Back!</h2> : <h2>Please Log In</h2>}
    </div>
  );
}

If isLoggedIn is true, React displays “Welcome Back!”. Otherwise, it shows “Please Log In”.

Using the Logical AND (&&) Operator

When you want to render something only if a condition is true, use &&.

function Notifications({ count }) {
  return (
    <div>
      <h3>Notifications</h3>
      {count > 0 && <p>You have {count} new messages.</p>}
    </div>
  );
}

If count is greater than 0, the message appears. If not, nothing is displayed.

Using If/Else Statements

For complex logic, it is cleaner to use if/else before returning JSX.

function AccessMessage({ role }) {
  let message;

  if (role === "admin") {
    message = "Welcome, Admin!";
  } else if (role === "user") {
    message = "Welcome, User!";
  } else {
    message = "Please sign in.";
  }

  return <h2>{message}</h2>;
}

This keeps JSX readable while handling logic separately.

Combining State with Conditional Rendering

import { useState } from "react";

function LoginPanel() {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <div>
      {loggedIn ? (
        <>
          <h2>Welcome Back!</h2>
          <button onClick={() => setLoggedIn(false)}>Logout</button>
        </>
      ) : (
        <>
          <h2>Please Log In</h2>
          <button onClick={() => setLoggedIn(true)}>Login</button>
        </>
      )}
    </div>
  );
}

When the button is clicked, state changes and React updates the UI instantly.

What Is List Rendering?

List rendering means displaying multiple elements using an array of data. Instead of writing repeated HTML, React uses JavaScript’s map() function.

const fruits = ["Apple", "Banana", "Cherry"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

The map() function converts each array item into a JSX element.

Why Keys Are Important

Each item in a list needs a unique key. Keys help React track which items change, get added, or removed.

const products = [
  { id: 1, name: "Laptop" },
  { id: 2, name: "Phone" }
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Using stable IDs is better than using array indexes.

Conditional Rendering Inside Lists

const tasks = [
  { id: 1, title: "Learn React", completed: true },
  { id: 2, title: "Build Project", completed: false }
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          {task.title} {task.completed ? "?" : "?"}
        </li>
      ))}
    </ul>
  );
}

The UI changes depending on each task’s completion status.

Common Mistakes to Avoid

• Forgetting the key prop in lists

• Using an array index as a key when the list order can change

• Writing complex logic directly inside JSX

• Returning multiple elements without a wrapper

Summary

In this chapter, you learned how conditional rendering allows React to show UI based on conditions and how list rendering displays dynamic data. You used ternary operators, logical AND, and if/else logic, and learned the importance of keys when rendering lists. These techniques help build intelligent, data-driven user interfaces.