Module 32: Components and Props
Showing nothing, something, or a message
🏠The everyday picture
A shop's display window: when there's stock, it shows the goods; when there isn't, a sign says "New stock arriving Friday", not an empty, confusing window.
📘What it really is
- Choose what to show with ordinary JavaScript in JSX:
&&for "show this or nothing":{isUrgent && <span className="urgent">Urgent</span>};- the ternary for "this or that":
{items.length > 0 ? <List items={items} /> : <EmptyState />}; -
an early
returnfor whole alternative screens. -
Trap:
{count && <p>…</p>}shows a 0 on screen whencountis 0, because0is falsy but still printable. Use{count > 0 && ...}. -
Every list needs an empty state: a friendly message and, ideally, a next step ("No open enquiries. Nice work!").
-
Returning
nullfrom a component shows nothing. - Module 33 builds on this with state that changes, and Module 38 adds loading and error states.
🖱️Try it
Create an EmptyState component with a message prop. Show it in each panel when its list is empty. Test by
temporarily making all sample enquiries closed. Show an "Urgent" label on cards whose subject contains
"urgent" (ignoring case).
✅Quick check
{enquiries.length && <List />} shows "0" on screen when empty. Why, and what's the fix?
Show the answer
0 is falsy so && returns it, and React prints numbers. Use enquiries.length > 0 && ....
Why does every list need an empty state?
Show the answer
An empty space looks broken; a message tells people what's going on and what to do next.