Ternary operator usage in React - Mini Project: Build & Apply

Ternary Operator Usage in React

📖 Scenario: You are building a simple React component that shows a message based on a user's login status. This is like a welcome sign that changes depending on whether the user is logged in or not.

🎯 Goal: Create a React functional component called StatusMessage that uses a ternary operator to display "Welcome back!" if the user is logged in, or "Please log in." if the user is not logged in.

📋 What You'll Learn

Create a boolean state variable called isLoggedIn with initial value false.

Create a button that toggles the isLoggedIn state between true and false.

Use a ternary operator inside the JSX to show "Welcome back!" when isLoggedIn is true, or "Please log in." when isLoggedIn is false.

Ensure the component updates the message immediately when the button is clicked.

💡 Why This Matters

🌍 Real World

Many websites and apps show different content depending on whether a user is logged in. Using ternary operators in React helps show these changes clearly and simply.

💼 Career

Understanding conditional rendering with ternary operators and managing state is essential for React developers building interactive user interfaces.

1

Set up the React component and state

Create a React functional component called StatusMessage. Inside it, use the useState hook to create a boolean state variable called isLoggedIn with initial value false.

React

import React, { useState } from 'react';

function StatusMessage() {
  // Create isLoggedIn state with initial value false
  // Your code here
}

Hint

Remember to import useState from React and call it inside your component to create the isLoggedIn state.

2

Add a button to toggle login state

Inside the StatusMessage component, add a button element. When clicked, it should toggle the isLoggedIn state between true and false using the setIsLoggedIn function.

React

import React, { useState } from 'react';

function StatusMessage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    
      {/* Add a button that toggles isLoggedIn state on click */}
      {/* Your code here */}
    
  );
}

Hint

Use an arrow function in the onClick attribute to call setIsLoggedIn with the opposite of the current isLoggedIn value.

3

Use a ternary operator to show the message

Inside the return statement of StatusMessage, add a p element that uses a ternary operator to display "Welcome back!" if isLoggedIn is true, or "Please log in." if isLoggedIn is false.

React

import React, { useState } from 'react';

function StatusMessage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    
       setIsLoggedIn(!isLoggedIn)}>
        Toggle Login
      
      {isLoggedIn ? "Welcome back!" : "Please log in."}
      // Your code here
    
  );
}

Hint

Use curly braces inside JSX to embed the ternary expression that checks isLoggedIn.

4

Add accessibility and finalize component

Add an aria-live attribute with value polite to the p element to make screen readers announce the message changes politely. Also, add a descriptive aria-label to the button as Toggle login status.

React

import React, { useState } from 'react';

function StatusMessage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    
       setIsLoggedIn(!isLoggedIn)} aria-label="Toggle login status">
        Toggle Login
      
      {isLoggedIn ? "Welcome back!" : "Please log in."}
      // Your code here
    
  );
}

Hint

Use aria-live="polite" on the message paragraph and aria-label="Toggle login status" on the button for accessibility.

Practice

1. What does the ternary operator condition ? expr1 : expr2 do in React JSX?

easy

A. It chooses expr1 if condition is true, otherwise expr2.

B. It always returns expr2 regardless of the condition.

C. It runs both expr1 and expr2 and returns an array.

D. It throws an error if condition is false.

Solution

1. Step 1: Understand ternary operator structure

   The ternary operator has the form condition ? expr1 : expr2, which means it evaluates the condition first.

2. Step 2: Evaluate the condition result

   If the condition is true, it returns expr1; if false, it returns expr2.

3. Final Answer:

   It chooses expr1 if condition is true, otherwise expr2. -> Option A

4. Quick Check:

   Ternary operator = choose between two values [OK]

Hint: Remember: condition ? trueValue : falseValue [OK]

Common Mistakes:

• Thinking it runs both expressions
• Confusing with logical AND/OR operators
• Using it outside JSX incorrectly

2. Which of the following is the correct syntax to use a ternary operator inside JSX to display "Yes" if isActive is true, else "No"?

easy

A. {isActive ? "Yes"; "No"}

B. {isActive ? "Yes" : "No"}

C. {isActive ? "Yes"}

D. {isActive : "Yes" ? "No"}

Solution

1. Step 1: Check ternary operator syntax in JSX

   The ternary operator must be inside curly braces in JSX and follow condition ? expr1 : expr2 format.

2. Step 2: Validate each option

   {isActive ? "Yes" : "No"} correctly uses {isActive ? "Yes" : "No"}. Options B, C, and D have syntax errors or incomplete expressions.

3. Final Answer:

   {isActive ? "Yes" : "No"} -> Option B

4. Quick Check:

   Correct JSX ternary syntax = {isActive ? "Yes" : "No"} [OK]

Hint: Use curly braces and ? : inside JSX [OK]

Common Mistakes:

• Missing colon ':' in ternary
• Using semicolon instead of colon
• Not wrapping expression in curly braces

3. What will this React component render?

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

If isLoggedIn is false?

medium

A. Please sign in.

B. Welcome back!

C.

D. SyntaxError

Solution

1. Step 1: Understand the ternary condition

   The component uses isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>. If isLoggedIn is false, it chooses the second expression.

2. Step 2: Determine output when isLoggedIn is false

   Since isLoggedIn is false, it renders <h1>Please sign in.</h1> inside the div.

3. Final Answer:

   <div><h1>Please sign in.</h1></div> -> Option A

4. Quick Check:

   False condition shows second expression [OK]

Hint: False condition picks expression after colon ':' [OK]

Common Mistakes:

• Choosing first expression for false condition
• Confusing JSX tags rendering
• Expecting empty div output

4. Identify the error in this JSX snippet:

return (
  <div>
    {isReady ? <p>Ready</p> : <p>Not ready</p>}
    {isReady ? <p>Go!</p> : null}
  </div>
);

medium

A. Ternary operator cannot be used inside JSX.

B. JSX elements must not be inside curly braces.

C. Second ternary is missing the else part after colon.

D. No error; code is valid.

Solution

1. Step 1: Check each ternary usage

   The first ternary is correct with both true and false parts. The second uses {isReady ? <p>Go!</p> : null} which is valid syntax.

2. Step 2: Understand ternary operator requirements

   The ternary operator requires both true and false expressions separated by a colon. Here, the else part is null, which is valid JSX.

3. Final Answer:

   No error; code is valid. -> Option D

4. Quick Check:

   Ternary needs both ? and : parts, and else can be null [OK]

Hint: Ternary always needs ? and : parts [OK]

Common Mistakes:

• Omitting the else expression
• Confusing ternary with logical AND
• Thinking JSX can't have ternary

5. You want to display a list of user names with a label showing if they are online or offline using ternary inside JSX. Which code correctly implements this?

const users = [
  { name: "Alice", online: true },
  { name: "Bob", online: false }
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.name}>
          {user.name} - {user.online ? "Online" : "Offline"}
        </li>
      ))}
    </ul>
  );
}

hard

A. Does not render anything because key is missing.

B. Will throw an error because ternary cannot be used inside map.

C. Correctly shows each user with "Online" or "Offline" label.

D. Only shows "Online" for all users regardless of status.

Solution

1. Step 1: Analyze the map and ternary usage

   The code maps over users and uses a ternary to show "Online" if user.online is true, else "Offline".

2. Step 2: Check React key and JSX correctness

   Each <li> has a unique key from user.name, and the ternary is correctly inside JSX curly braces.

3. Final Answer:

   Correctly shows each user with "Online" or "Offline" label. -> Option C

4. Quick Check:

   Map + ternary inside JSX = correct rendering [OK]

Hint: Use map with ternary inside JSX for conditional labels [OK]

Common Mistakes:

• Forgetting unique key in list items
• Trying to use ternary outside JSX braces
• Assuming ternary can't be used in map