Skip to content
Onsite

A component renders count && <List />. What appears when count is 0?

EasyP2Output

A React component renders a list only when it has items:

function Results({ count }) {
  return <div>{count && <List />}</div>;
}

The snippet models what each expression evaluates to and what React puts on screen. What does it print?

1const renderList = () => '<List />';
2// React shows strings and numbers (including 0) as text,
3// and shows nothing for false, null and undefined.
4const shown = (v) => (typeof v === 'boolean' || v == null ? '(nothing)' : String(v));
5
6const a = (count) => count && renderList();
7const b = (count) => count > 0 && renderList();
8const c = (count) => (count ? renderList() : null);
9
10console.log(shown(a(0)));
11console.log(shown(a(2)));
12console.log(shown(b(0)));
13console.log(shown(c(0)));
Saved automatically

One line per console.log. Arrays as [1, 2, 3], objects as { a: 1 }, an uncaught error as Uncaught TypeError: message (Chrome and Node wording).

Hints

Saved automatically