Why conditional rendering is needed in React - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use conditional rendering in React?

Which of the following best explains why conditional rendering is important in React?

A It allows components to display different content based on user actions or data changes.

B It automatically improves the performance of React apps without any developer input.

C It forces React to reload the entire page when data changes occur.

D It prevents React components from updating when props change.

💡 Hint

Think about how apps show different things depending on what the user does or what data is available.

Conditional rendering lets React components show different UI parts depending on conditions like user input or data state. This makes apps interactive and dynamic.

❓ component_behavior

intermediate

What will this React component render?

Given this React component, what will it display when the prop isLoggedIn is false?

React

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

A <h1>Welcome back!</h1>

B Nothing will render.

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

D An error will occur because of missing return.

💡 Hint

Look at the condition inside the curly braces and what happens when it is false.

The component uses a conditional (ternary) operator. When isLoggedIn is false, it renders <h1>Please sign up.</h1>.

❓ state_output

advanced

What is the output after clicking the button twice?

Consider this React component. What text will it display after clicking the button two times?

React

import React, { useState } from 'react';

function ToggleMessage() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && <p>Hello!</p>}
    </div>
  );
}

A The text 'Hello!' is visible.

B No text is visible.

C The text 'Toggle' is replaced by 'Hello!'.

D An error occurs because of missing key prop.

💡 Hint

Each click flips the show state. Think about the state after two flips starting from false.

The show state starts as false. Clicking toggles it: false → true → false. After two clicks, show is false, so <p>Hello!</p> is not rendered.

📝 Syntax

advanced

Which option correctly uses conditional rendering in React?

Which of these code snippets correctly uses conditional rendering to show <p>Loading...</p> only when isLoading is true?

A return if (isLoading) { <p>Loading...</p> };

B return (isLoading) => <p>Loading...</p>;

C return {isLoading ? <p>Loading...</p>};

D return isLoading && <p>Loading...</p>;

💡 Hint

Remember how JSX uses expressions inside return statements.

Option D uses the logical AND operator to conditionally render the paragraph when isLoading is true. Options A, C, and D have syntax errors or invalid JSX.

🔧 Debug

expert

Why does this React component cause an error?

This React component throws an error when rendering. What is the cause?

React

function Example({ show }) {
  if (show) {
    return <p>Visible</p>;
  } else {
    return <p>Hidden</p>;
  }
}

A The component does not return any JSX, so it returns undefined causing an error.

B The JSX inside the if and else blocks is invalid syntax.

C The prop 'show' is not destructured correctly.

D The component must use a switch statement instead of if-else.

💡 Hint

Check if the function returns JSX or not.

The component uses if-else blocks with JSX inside but does not return anything. React components must return JSX or null. Without a return, it returns undefined, causing an error.