Conditional component rendering in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component?

Consider this React component that conditionally renders a message based on a boolean state.

import React, { useState } from 'react';

function Welcome() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

What will be rendered when this component first appears?

React

import React, { useState } from 'react';

function Welcome() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

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

B <div><h1>Welcome back!</h1></div>

C <div></div>

D SyntaxError: Unexpected token

💡 Hint

Look at the initial value of isLoggedIn in the useState hook.

The state isLoggedIn starts as false. The ternary operator renders the second option, which is <h1>Please sign in.</h1>.

📝 Syntax

intermediate

Which option correctly uses conditional rendering with && operator?

In React, you want to render a <p>Hello User</p> only if isUser is true. Which code snippet correctly does this?

React

function Greeting({ isUser }) {
  return (
    <div>
      {/* Your code here */}
    </div>
  );
}

A {isUser || <p>Hello User</p>}

B {isUser && <p>Hello User</p>}

C {if (isUser) <p>Hello User</p>}

D {isUser ? <p>Hello User</p> : null}

💡 Hint

Remember that JSX expressions must be valid JavaScript expressions.

Option B uses the logical AND operator to conditionally render the paragraph only if isUser is true. Option B is also valid but the question asks for the && operator specifically. Option B is invalid syntax inside JSX. Option B renders the paragraph when isUser is false, which is incorrect.

❓ state_output

advanced

What is the rendered output after clicking the button twice?

Given this React component, what will be the displayed message after clicking the button two times?

import React, { useState } from 'react';

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

      {show && 
Visible
}
      
    
  );
}

React

import React, { useState } from 'react';

function ToggleMessage() {
  const [show, setShow] = useState(true);
  return (
    <div>
      {show && <p>Visible</p>}
      <button onClick={() => setShow(!show)}>Toggle</button>
    </div>
  );
}

A <div><button>Toggle</button></div>

B <div><p>Visible</p><p>Visible</p><button>Toggle</button></div>

C <div><p>Toggle</p><button>Visible</button></div>

D <div><p>Visible</p><button>Toggle</button></div>

💡 Hint

Each click toggles the show state between true and false.

Initially, show is true, so <p>Visible</p> is shown. Clicking once sets show to false, hiding the paragraph. Clicking again sets it back to true, showing the paragraph again.

🔧 Debug

advanced

Why does this conditional rendering cause an error?

Examine this React component:

function Example({ show }) {
  return (
    <div>
      {show && if (true) <p>Hello</p>}
    </div>
  );
}

What error will this code cause?

React

function Example({ show }) {
  return (
    <div>
      {show && if (true) <p>Hello</p>}
    </div>
  );
}

A SyntaxError: Unexpected token 'if'

B TypeError: Cannot read property 'p' of undefined

C No error, renders <p>Hello</p> when show is true

D ReferenceError: show is not defined

💡 Hint

JSX expressions must be valid JavaScript expressions, not statements.

The if statement is not allowed inside JSX expressions. This causes a syntax error.

🧠 Conceptual

expert

Which option best describes React's conditional rendering behavior?

In React, when you use conditional rendering with expressions like {condition && <Component />}, what happens if condition is false?

A React renders the component but hides it with CSS

B React throws an error because false is not a valid React element

C React renders nothing for that expression, outputting false which is ignored in rendering

D React renders a placeholder element instead of the component

💡 Hint

Think about how React treats boolean values in JSX.

When the condition is false, React renders nothing for that expression. The false value is ignored and does not produce any DOM output or error.