React Conditionals

Rendering content based on conditions

🔀 What are React Conditionals?

React conditionals allow you to render different content based on certain conditions. You can show or hide elements, display different messages, or render components dynamically using JavaScript conditional logic. 


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

Output (when isLoggedIn = true):

Welcome back!

Types of Conditional Rendering

❓

Ternary Operator

Quick if-else in JSX 

{condition ? <A /> : <B />}
&&

Logical AND

Render only if true 

{condition && <Component />}
📋

If Statement

Use before return 

if (condition) {
  return <A />;
}
🔄

Switch Case

Multiple conditions 

switch(value) {
  case 'a': return <A />;
}

🔹 Using Ternary Operator

The ternary operator is the most common way to conditionally render content in React. It works like a compact if-else statement directly inside your JSX, making your code clean and readable. 

function LoginButton({ isLoggedIn }) {
  return (
    <button>
      {isLoggedIn ? 'Logout' : 'Login'}
    </button>
  );
}

// Usage
<LoginButton isLoggedIn={true} />
<LoginButton isLoggedIn={false} />

Output:

🔹 Using Logical AND (&&)

The logical AND operator is perfect when you only want to render something if a condition is true. If the condition is false, nothing will be rendered at all. 

function Notification({ hasMessages, messageCount }) {
  return (
    <div>
      <h2>Inbox</h2>
      {hasMessages && (
        <p>You have {messageCount} new messages!</p>
      )}
    </div>
  );
}

// Usage
<Notification hasMessages={true} messageCount={5} />

Output:

Inbox

You have 5 new messages!

🔹 Using If Statement

For more complex conditions, you can use regular if statements before the return statement. This approach is cleaner when you have multiple conditions or need to perform additional logic. 

function UserStatus({ user }) {
  if (!user) {
    return <p>Please log in to continue.</p>;
  }
  
  if (user.isPremium) {
    return <p>Welcome, Premium Member {user.name}!</p>;
  }
  
  return <p>Welcome, {user.name}!</p>;
}

// Usage
<UserStatus user={{ name: 'John', isPremium: true }} />

Output:

Welcome, Premium Member John!

🔹 Multiple Conditions with Switch

When you have many possible conditions based on a single value, switch statements provide a clean and organized way to handle different cases in your React components. 

function StatusBadge({ status }) {
  let badge;
  
  switch(status) {
    case 'success':
      badge = <span style={{ color: 'green' }}>✓ Success</span>;
      break;
    case 'error':
      badge = <span style={{ color: 'red' }}>✗ Error</span>;
      break;
    case 'pending':
      badge = <span style={{ color: 'orange' }}>⏳ Pending</span>;
      break;
    default:
      badge = <span>Unknown</span>;
  }
  
  return <div>{badge}</div>;
}

Output:

✓ Success ✗ Error ⏳ Pending

🧠 Test Your Knowledge

Which operator is best for rendering content only when a condition is true?