Conditional component rendering in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render the component only if the user is logged in.

React

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn && [1]
    </div>
  );
}

Drag options to blanks, or click blank then click option'

A<Login />

B<Welcome />

CWelcome()

DLogin()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the component as a function call instead of JSX.

Rendering the wrong component when logged in.

The expression {isLoggedIn && <Welcome />} renders the <Welcome /> component only when isLoggedIn is true.

2fill in blank

medium

Complete the code to render if the user is not logged in, otherwise render .

React

function App() {
  const isLoggedIn = false;
  return (
    <div>
      {isLoggedIn ? [1] : [1]
    </div>
  );
}

Drag options to blanks, or click blank then click option'

ADashboard()

B<Login />

C<Dashboard />

DLogin()

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the true and false components.

Using function calls instead of JSX.

The ternary operator chooses between <Dashboard /> and <Login />. Here, the first option is for when isLoggedIn is true.

3fill in blank

hard

Fix the error in the code to conditionally render only if user exists.

React

function App({ user }) {
  return (
    <div>
      {user [1] <Profile user={user} />}
    </div>
  );
}

Drag options to blanks, or click blank then click option'

A||

B!

C?

D&&

Attempts:

3 left

💡 Hint

Common Mistakes

Using || which renders the component when user is falsy.

Using ? without a false case.

The logical AND operator && renders <Profile /> only if user is truthy.

4fill in blank

hard

Fill both blanks to render if user is admin, else render .

React

function Dashboard({ user }) {
  return (
    <div>
      {user.role [1] 'admin' ? [2] : <UserPanel />}
    </div>
  );
}

Drag options to blanks, or click blank then click option'

A===

B!==

C<AdminPanel />

D<GuestPanel />

Attempts:

3 left

💡 Hint

Common Mistakes

Using !== instead of === causing wrong rendering.

Rendering the wrong component for admin.

The strict equality operator === checks if the role is 'admin'. If true, it renders <AdminPanel />, else <UserPanel />.

5fill in blank

hard

Fill all three blanks to create a dictionary of components to render based on status.

React

const statusComponents = {
  success: [1],
  error: [2],
  loading: [3]
};

Drag options to blanks, or click blank then click option'

A<SuccessMessage />

B<ErrorMessage />

C<LoadingSpinner />

D<DefaultMessage />

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up components for statuses.

Using component names without angle brackets.

This object maps status keys to their respective components for rendering.

Practice

1. What does conditional rendering in React allow you to do?

easy

A. Create new components on the fly without JSX

B. Change the CSS styles of components dynamically

C. Automatically fetch data from APIs

D. Show or hide parts of the UI based on data or state

Solution

1. Step 1: Understand the purpose of conditional rendering

   Conditional rendering controls what parts of the UI appear based on conditions like state or props.

2. Step 2: Differentiate from other React features

   Changing styles or fetching data are different tasks; conditional rendering specifically controls visibility.

3. Final Answer:

   Show or hide parts of the UI based on data or state -> Option D

4. Quick Check:

   Conditional rendering = Show/hide UI [OK]

Hint: Conditional rendering controls UI visibility based on conditions [OK]

Common Mistakes:

• Confusing conditional rendering with styling changes
• Thinking it automatically fetches data
• Believing it creates components without JSX

2. Which of the following is the correct syntax for conditional rendering using a ternary operator in React JSX?

easy

A. if (condition) <ComponentA /> else <ComponentB />

B. {condition ? <ComponentA /> : <ComponentB />}

C. {if condition then <ComponentA /> else <ComponentB />}

D. {condition && <ComponentA /> else <ComponentB />}

Solution

1. Step 1: Recall JSX expression syntax

   JSX uses curly braces {} to embed JavaScript expressions, including ternary operators.

2. Step 2: Identify correct ternary operator usage

   The ternary operator syntax is condition ? exprIfTrue : exprIfFalse, which matches {condition ? <ComponentA /> : <ComponentB />}.

3. Final Answer:

   {condition ? <ComponentA /> : <ComponentB />} -> Option B

4. Quick Check:

   Ternary in JSX = condition ? true : false [OK]

Hint: Use curly braces and ? : for ternary in JSX [OK]

Common Mistakes:

• Using if-else statements directly inside JSX
• Writing invalid JavaScript syntax inside JSX
• Confusing logical AND with ternary operator

3. Given the code below, what will be rendered if isLoggedIn is false?

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

medium

A. Welcome back!

B. Syntax error

C. Please sign up.

D. Nothing will render

Solution

1. Step 1: Check the value of isLoggedIn

   The value is false, so the condition in the ternary operator is false.

2. Step 2: Evaluate the ternary operator

   Since condition is false, the expression after the colon is rendered: <h1>Please sign up.</h1>.

3. Final Answer:

   <h1>Please sign up.</h1> -> Option C

4. Quick Check:

   isLoggedIn false = show sign up message [OK]

Hint: False condition shows expression after colon in ternary [OK]

Common Mistakes:

• Assuming true branch renders when condition is false
• Thinking nothing renders on false
• Confusing syntax with runtime error

4. Identify the error in this React component that tries to conditionally render a message:

function Message({ show }) {
  return (
    <div>
      {show && <p>Hello World!</p> else <p>No message</p>}
    </div>
  );
}

medium

A. Using else inside JSX expression is invalid

B. Missing parentheses around JSX elements

C. Incorrect use of logical AND operator

D. Component must return a string, not JSX

Solution

1. Step 1: Review JSX expression syntax

   JSX expressions inside curly braces must be valid JavaScript expressions; 'else' cannot be used inside them.

2. Step 2: Identify invalid use of else

   The code uses 'else' after a logical AND expression, which is not valid JavaScript syntax.

3. Final Answer:

   Using else inside JSX expression is invalid -> Option A

4. Quick Check:

   JSX expressions cannot contain else keyword [OK]

Hint: No else keyword inside JSX expressions; use ternary instead [OK]

Common Mistakes:

• Trying to use else with logical AND
• Forgetting ternary operator syntax
• Assuming JSX can contain statements like else

5. You want to render a list of notifications only if the list is not empty. Which React pattern correctly handles this conditional rendering?

const notifications = [];

function NotificationList() {
  return (
    <div>
      {/* Choose the correct conditional rendering here */}
      {notifications.length > 0 ? (
        notifications.map((note, index) => <p key={index}>{note}</p>)
      ) : (
        <p>No notifications</p>
      )}
    </div>
  );
}

hard

A. Use ternary operator checking notifications.length > 0

B. Use only logical AND: {notifications.length && notifications.map(...)}

C. Use if statement inside JSX to check length

D. Render notifications.map(...) without any condition

Solution

1. Step 1: Understand the need for else case

   We want to show a message if there are no notifications, so we need both true and false cases.

2. Step 2: Evaluate each option

   Use ternary operator checking notifications.length > 0 uses a ternary operator to handle both cases correctly. Use only logical AND: {notifications.length && notifications.map(...)} only renders when length is truthy but shows nothing if empty. Use if statement inside JSX to check length is invalid syntax inside JSX. Render notifications.map(...) without any condition always renders map, which errors if empty.

3. Final Answer:

   Use ternary operator checking notifications.length > 0 -> Option A

4. Quick Check:

   Ternary handles both cases in JSX [OK]

Hint: Use ternary to handle both empty and non-empty lists [OK]

Common Mistakes:

• Using if statements directly inside JSX
• Using logical AND without else case
• Rendering map on empty array without check