In React, building a static website is only half the story. The true power of React is in building **dynamic user interfaces** that respond to state, props, and user interactions. The core technique behind this is **conditional rendering**.

Conditional rendering is exactly what it sounds like: a way to render specific JSX elements or components **only if** certain conditions are met. React leverages standard JavaScript logic, but there are specific patterns that are essential to master.

Pattern 1: `if` Statements (Element Variables)

You **cannot** use a standard `if...else` statement directly inside JSX curly braces ``. JSX is just syntactic sugar for function calls, and `if` statements are not valid JavaScript expressions (they don't return a value).

The solution is to use an `if` statement *before* the `return` statement to assign JSX to a variable. This is known as the "element variable" pattern and is excellent for complex logic.

function Greeting({ isLoggedIn }) {
  let content; // This is our element variable

  if (isLoggedIn) {
    content = <Dashboard />;
  } else {
    content = <LoginPage />;
  }

  return (
    <div>
      {content} {/* Render the variable here */}
    </div>
  );
}

Pattern 2: The Ternary Operator (`? :`)

This is the most common and concise way to handle a simple `if-else` condition *inside* your JSX. The ternary operator **is** a JavaScript expression, so it's perfectly valid.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <Dashboard /> : <LoginPage />}
    </div>
  );
}

You can even use it for simple text: {isOnline ? 'Online' : 'Offline'}. While you can nest ternaries, it's strongly discouraged as it quickly becomes unreadable. For nested logic, use element variables.

Pattern 3: Logical AND (`&&`) - Short-Circuiting

What if you want to render something *or nothing*? You could use a ternary (`condition ? <Component /> : null`), but a more elegant way is to use the logical AND (`&&`) operator.

In JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. React knows not to render `false`, `null`, or `undefined`.

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

Common Pitfall: The `0` Problem with `&&`

There is a major "gotcha" with `&&`. What if your condition evaluates to the number `0`?

`0` is a **falsy** value. So `0 && <Component />` will short-circuit and evaluate to `0`. The problem? Unlike `false` or `null`, **React renders the number 0**!

const count = 0;
{count && <Messages />}
// Renders: 0

const count = 0;
{count > 0 && <Messages />}
// Renders: (nothing)

**Always ensure the left side of `&&` is a true boolean (true/false).**

Pattern 4: Logical OR (`||`) - Fallback Values

The logical OR (`||`) operator is perfect for providing default or fallback values. `a || b` will return `a` if it's "truthy," otherwise it will return `b`.

// If user.name is null or an empty string, it will show 'Guest'
<h1>Hello, {user.name || 'Guest'}</h1>

Key Takeaway: Choose the right tool for the job. Use **element variables** for complex logic, the **ternary operator (`? :`)** for simple A/B choices, and **`&&`** (with a boolean check!) for "render or nothing" logic.