In React, your components are blueprints. They describe *what* the UI should look like based on the current **state** and **props**. **Conditional rendering** is the term for the techniques you use to return different elements based on those inputs. This is how you create a UI that feels alive and responsive, showing loaders, error messages, user dashboards, or login forms.

Method 1: The Ternary Operator (If-Else)

This is the most common and direct way to handle an "if-else" scenario directly within your JSX. The syntax is condition ? expressionIfTrue : expressionIfFalse. It's perfect for when you must render one of two things.

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

Method 2: The Logical && Operator (If)

What if you only want to render something *if* a condition is true, and render *nothing* otherwise? The logical `&&` operator is your best friend. In JavaScript, true && expression always evaluates to `expression`, and false && expression evaluates to `false`. React knows not to render `false`, so it works perfectly.

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

Method 3: `if` Statements & Element Variables

Sometimes your logic is too complex for a ternary or `&&`. You can't put a plain `if` statement inside JSX, but you can use one *before* the `return` statement to prepare your UI in a variable. This is often the cleanest and most readable approach for complex components.

function LoginButton({ status }) {
  let buttonContent;
  let buttonColor;

  if (status === 'loading') {
    buttonContent = 'Loading...';
    buttonColor = 'gray';
  } else if (status === 'error') {
    buttonContent = 'Try Again';
    buttonColor = 'red';
  } else {
    buttonContent = 'Login';
    buttonColor = 'blue';
  }

  return <button className={buttonColor}>{buttonContent}</button>;
}

Method 4: Returning `null` (Preventing Render)

In some cases, you don't want a component to render *anything* at all. You can explicitly return `null` from a component to tell React to render nothing. This is different from returning an empty `<div>`—`null` renders literally nothing.

function AdminPanel({ isAdmin }) {
  if (!isAdmin) {
    return null;
  }

  return (
    <div>
      {/* ... super secret admin stuff ... */}
    </div>
  );
}

Key Takeaway: Choose the right tool for the job. Use a **ternary** for simple if-else, `&&` for "if-and-nothing-else", and **element variables** with `if` statements for complex logic. Returning `null` is a powerful tool to prevent rendering entirely.