Personal Catalogue: React, Express & MongoDB — Chapter 7, Exercise 2
=====================================================================

TASK
Temporarily revert ItemList's summary line to the naive
template-literal version (`By ${item.author}`) and confirm the real
"By undefined" text appears for a Cd, Dvd, or Bluray. Restore the
getCreator() version and confirm the fix.

SOLUTION

Temporarily revert the summary line:

  export default function ItemList({ items, onSelect }) {
    return (
      <ul>
        {items.map((item) => (
          <li key={item._id} onClick={() => onSelect(item._id)}>
            <strong>{item.title}</strong>
            <p>{`By ${item.author}`}</p>
            <span>({item.releaseYear})</span>
          </li>
        ))}
      </ul>
    );
  }

With a real Cd ("OK Computer", artist "Radiohead", no author field at
all) already in the list, the rendered output shows:

  OK Computer
  By undefined
  (1997)

The literal word "undefined" is genuinely visible on the page -- not a
console warning, not a silent gap, real text a user would see and be
confused by.

Restore the fixed version:

  function getCreator(item) {
    return item.author || item.artist || item.director || null;
  }

  export default function ItemList({ items, onSelect }) {
    return (
      <ul>
        {items.map((item) => (
          <li key={item._id} onClick={() => onSelect(item._id)}>
            <strong>{item.title}</strong>{' '}
            <span className="type-badge">{item.itemType}</span>
            {getCreator(item) && <p>By {getCreator(item)}</p>}
            {item.releaseYear && <span>({item.releaseYear})</span>}
          </li>
        ))}
      </ul>
    );
  }

The identical Cd now renders:

  OK Computer [Cd]
  By Radiohead
  (1997)

WHY THIS HAPPENS
-----------------
`${item.author}` inside a template literal calls String(undefined)
internally, which returns the actual four-character string "undefined"
-- not an empty string, not a thrown error. Once that coercion has
happened, the value passed to <p> is just an ordinary string like any
other, and React renders it exactly as it would render "By Radiohead"
-- there's no way for React to know the string came from a missing
value rather than a real one.

getCreator(item) never lets that coercion happen. It picks the first
truthy field among author/artist/director, or returns an actual null
if none exist -- and null combined with && in JSX short-circuits to
null, which React explicitly recognizes as "render nothing here,"
rather than converting it into text first.

WHY THIS WORKS AS AN ANSWER
----------------------------
It reproduces the real, literal "By undefined" bug with a real Cd
document and a real observed render, explains the exact mechanism
(template-literal string coercion of undefined) rather than just
saying "template literals are bad," and shows the fixed version
producing a genuinely different, correct result for the identical
document.