If conditions in JSX in React

Introduction

If conditions in JSX help you show or hide parts of your webpage based on some rules, like showing a message only if a user is logged in.

Show a welcome message only when a user is logged in.

Display a loading spinner while data is being fetched.

Hide a button if a form is not filled correctly.

Show different text based on a user's choice.

Syntax

React

const element = condition ? <ComponentA /> : <ComponentB />;

You can use the ternary operator inside JSX to choose what to show.

For simple show/hide, you can use && to show something only if a condition is true.

Examples

Shows a welcome message if logged in, otherwise asks to log in.

React

const message = isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;

Shows "Loading..." only if isLoading is true.

React

const loading = isLoading && <p>Loading...</p>;

Renders AdminPanel if user is admin, else UserPanel.

React

return (
  <div>
    {isAdmin ? <AdminPanel /> : <UserPanel />}
  </div>
);

Sample Program

This component shows a welcome message if the user is logged in. A button toggles the login state to show how the message changes.

React

import React, { useState } from 'react';

export default function Greeting() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <h1>My Website</h1>
      {isLoggedIn ? <p>Welcome back, friend!</p> : <p>Please log in to continue.</p>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Log out' : 'Log in'}
      </button>
    </div>
  );
}

Important Notes

Use parentheses around JSX inside conditions for better readability.

Don't use if statements directly inside JSX; use ternary or && instead.

Summary

If conditions in JSX let you show different things based on rules.

Use ternary (condition ? A : B) for two choices.

Use && to show something only if a condition is true.

Practice

1. Which of the following is the correct way to conditionally render a message in JSX when isLoggedIn is true?

easy

A. {if (isLoggedIn) <p>Welcome back!</p>}

B. {isLoggedIn && <p>Welcome back!</p>}

C. {isLoggedIn ? <p>Welcome back!</p>}

D. {isLoggedIn || <p>Welcome back!</p>}

Solution

1. Step 1: Understand JSX conditional rendering with &&

   In JSX, condition && expression renders the expression only if the condition is true.

2. Step 2: Check each option's syntax

   {isLoggedIn && <p>Welcome back!</p>} uses {isLoggedIn && <p>Welcome back!</p>}, which is correct. {if (isLoggedIn) <p>Welcome back!</p>} uses an invalid if statement inside JSX. {isLoggedIn ? <p>Welcome back!</p>} uses an incomplete ternary operator without the false branch (`: expression`), causing a syntax error. {isLoggedIn || <p>Welcome back!</p>} uses ||, which is incorrect for this purpose.

3. Final Answer:

   {isLoggedIn && <p>Welcome back!</p>} -> Option B

4. Quick Check:

   Use && for simple true condition rendering [OK]

Hint: Use && to show content only if true [OK]

Common Mistakes:

• Trying to use if statements directly inside JSX
• Using || instead of && for conditional rendering
• Confusing ternary with && when only one condition is needed

2. Which JSX snippet correctly uses a ternary operator to show <p>Hello</p> if showHello is true, otherwise <p>Goodbye</p>?

easy

A. {showHello && <p>Hello</p> else <p>Goodbye</p>}

B. {showHello ? <p>Goodbye</p> : <p>Hello</p>}

C. {if (showHello) <p>Hello</p> else <p>Goodbye</p>}

D. {showHello ? <p>Hello</p> : <p>Goodbye</p>}

Solution

1. Step 1: Understand ternary syntax in JSX

   The ternary operator syntax is condition ? expressionIfTrue : expressionIfFalse.

2. Step 2: Match the expressions to the condition

   {showHello ? <p>Hello</p> : <p>Goodbye</p>} correctly shows Hello if showHello is true, else Goodbye. {showHello && <p>Hello</p> else <p>Goodbye</p>} uses invalid syntax with else inside JSX. {if (showHello) <p>Hello</p> else <p>Goodbye</p>} tries to use if statement inside JSX, which is invalid. {showHello ? <p>Goodbye</p> : <p>Hello</p>} reverses the messages.

3. Final Answer:

   {showHello ? <p>Hello</p> : <p>Goodbye</p>} -> Option D

4. Quick Check:

   Ternary = condition ? true : false [OK]

Hint: Ternary: condition ? true : false for two choices [OK]

Common Mistakes:

• Using if/else statements directly inside JSX
• Swapping true and false expressions
• Using && when two choices are needed

3. What will be rendered by this React component?

function Greeting({ isMorning }) {
  return (
    <div>
      {isMorning ? <h1>Good morning!</h1> : <h1>Good evening!</h1>}
      {isMorning && <p>Have a nice day!</p>}
    </div>
  );
}

If isMorning is false?

medium

A. Good evening!

B. Good evening!Have a nice day!

C. Good morning!Have a nice day!

D. Good morning!

Solution

1. Step 1: Evaluate the ternary expression with isMorning = false

   The ternary isMorning ? <h1>Good morning!</h1> : <h1>Good evening!</h1> renders <h1>Good evening!</h1> because isMorning is false.

2. Step 2: Evaluate the && expression with isMorning = false

   The expression isMorning && <p>Have a nice day!</p> renders nothing because isMorning is false.

3. Final Answer:

   <div><h1>Good evening!</h1></div> -> Option A

4. Quick Check:

   False && anything = nothing [OK]

Hint: False && expression renders nothing; ternary picks false branch [OK]

Common Mistakes:

• Assuming && renders content when condition is false
• Mixing up ternary true/false branches
• Expecting both expressions to render always

4. Identify the error in this JSX snippet:

return (
  <div>
    {isActive ? <p>Active</p>}
  </div>
);

medium

A. No error, code is valid

B. Using if statement inside JSX

C. Missing else part in ternary operator

D. Incorrect use of && operator

Solution

1. Step 1: Check ternary operator syntax

   The ternary operator requires both true and false expressions: condition ? exprIfTrue : exprIfFalse. Here, the false part is missing.

2. Step 2: Understand JSX requirements

   Without the false expression, JSX will throw a syntax error because the ternary is incomplete.

3. Final Answer:

   Missing else part in ternary operator -> Option C

4. Quick Check:

   Ternary needs both ? and : parts [OK]

Hint: Ternary must have both ? and : parts [OK]

Common Mistakes:

• Omitting the else (false) part in ternary
• Confusing ternary with && operator
• Trying to use if statements inside JSX

5. You want to render a list of user names, but only show the name if the user is active. Which JSX code correctly implements this using map and conditional rendering?

hard

A. {users.map(user => user.isActive ? <li key={user.id}>{user.name}</li> : null)}

B. {users.map(user => if (user.isActive) return <li key={user.id}>{user.name}</li> )}

C. {users.map(user => user.isActive || <li>{user.name}</li>)}

D. {users.map(user => user.isActive ? <li>{user.name}</li> : <li>Inactive</li>)}

Solution

1. Step 1: Understand conditional rendering inside map

   To render only active users, use a ternary that returns the list item or null.

2. Step 2: Check key usage and syntax

   {users.map(user => user.isActive ? <li key={user.id}>{user.name}</li> : null)} correctly uses key={user.id} and returns null for inactive users, which React ignores.

3. Step 3: Analyze other options

   {users.map(user => if (user.isActive) return <li key={user.id}>{user.name}</li> )} uses invalid syntax: `if` statement directly after arrow function requires block `{}` braces. {users.map(user => user.isActive || <li>{user.name}</li>)} uses `||` which renders items for inactive users and misses keys. {users.map(user => user.isActive ? <li>{user.name}</li> : <li>Inactive</li>)} shows inactive users with text, which is not desired.

4. Final Answer:

   {users.map(user => user.isActive ? <li key={user.id}>{user.name}</li> : null)} -> Option A

5. Quick Check:

   Use ternary with key and null for conditional list rendering [OK]

Hint: Use ternary with key and null to skip items [OK]

Common Mistakes:

• Missing key prop in list items
• Using if statements inside map without return
• Rendering false or undefined instead of null