Logical AND rendering in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component render?

Consider this React component using logical AND rendering:

function ShowMessage({ show }) {
  return (
    <div>
      {show && <p>Hello, friend!</p>}
    </div>
  );
}

If show is false, what will be rendered inside the <div>?

React

function ShowMessage({ show }) {
  return (
    <div>
      {show && <p>Hello, friend!</p>}
    </div>
  );
}

A <div>false</div> (div contains the word 'false')

B <div></div> (empty div, no paragraph)

C <div><p>Hello, friend!</p></div> (paragraph always shown)

D <div>null</div> (div contains the word 'null')

💡 Hint

Remember how JavaScript treats false in expressions inside JSX.

When show is false, the expression show && <p>Hello, friend!</p> evaluates to false, which React ignores and renders nothing inside the div.

❓ component_behavior

intermediate

What is the output when using logical AND with a number zero?

Look at this React snippet:

function ShowCount({ count }) {
  return (
    <div>
      {count && <span>Count: {count}</span>}
    </div>
  );
}

If count is 0, what will be rendered inside the <div>?

React

function ShowCount({ count }) {
  return (
    <div>
      {count && <span>Count: {count}</span>}
    </div>
  );
}

A <div>0</div> (div contains the number zero as text)

B <div><span>Count: 0</span></div> (span shown with zero)

C <div></div> (empty div, no span)

D <div>false</div> (div contains the word 'false')

💡 Hint

Remember how JavaScript treats 0 in logical AND expressions.

Since 0 is falsy, the expression count && <span>Count: {count}</span> evaluates to 0, which React renders as the text '0' inside the div.

📝 Syntax

advanced

Which option causes a syntax error in logical AND rendering?

Which of these React JSX snippets will cause a syntax error?

A <div>{condition && <p>Text</p></div>

B >vid/<}>p/<txeT>p< && noitidnoc{>vid<

C <div>{condition && <p>Text</p>}</div>

D div>{condition && <p>Text</p>}</div>

💡 Hint

Check if all tags are properly closed.

Option A is missing the closing brace for the JSX expression, causing a syntax error.

❓ state_output

advanced

What is the rendered output after clicking the button twice?

Given this React component:

import { useState } from 'react';

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

      {show && 
Visible
}
      
    
  );
}

What will be rendered inside the <div> after clicking the button two times?

React

import { useState } from 'react';

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

A <div></div>

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

C <div><button>Toggle</button></div>

D <div><p>Visible</p></div>

💡 Hint

Think about how the boolean state changes with each click.

Starting with show=false, first click sets show=true (paragraph visible), second click sets show=false (paragraph hidden). So after two clicks, only the button is visible.

🔧 Debug

expert

Why does this logical AND rendering show '0' instead of hiding the element?

Examine this React component:

function ShowScore({ score }) {
  return (
    

      {score && Score: {score}}
    
  );
}

If score is 0, the component renders 0 inside the div instead of hiding the span. Why does this happen?

React

function ShowScore({ score }) {
  return (
    <div>
      {score && <span>Score: {score}</span>}
    </div>
  );
}

A Because 0 is falsy, React throws an error and stops rendering.

B Because 0 is falsy, React ignores it and renders an empty div.

C Because 0 is truthy, React renders the span with score 0.

D Because 0 is falsy, React renders it as text '0' instead of ignoring it.

💡 Hint

Think about how React treats numbers like 0 in JSX expressions.

In React, 0 is falsy but it is a number, so React renders it as text '0'. The logical AND returns 0, which React renders instead of ignoring it.