This or Nothing

Some cards need something extra that the others don't have: the headliners, the bands that close the day on the Main Stage, get a badge. With the conditional operator, the second value would be null, for which React shows nothing:

{band.headliner ? <span className="badge">Headliner</span> : null}

There's a shorter way, with &&:

{band.headliner && <span className="badge">Headliner</span>}

In the JavaScript course, you used && to combine conditions. But it can do more: it gives one of its two values. When the left one counts as false, && gives the left one and doesn't even look at the right one. Otherwise, it gives the right one:

console.log(true && "Headliner");
console.log(false && "Headliner");
console.log(undefined && "Headliner");

Headliner
false
undefined

So for a headliner, the expression is the badge. For the other bands, it's false, or undefined when they don't have the property headliner at all, and for false, true, null and undefined, React shows nothing.

But watch out for numbers. 0 counts as false too, so 0 && … gives 0. And numbers are something React does show:

{band.likes && <p>{band.likes} likes</p>}

A band with 12 likes shows 12 likes, but a band with none shows a lonely 0. The fix is a condition that's true or false, never a number: band.likes > 0 && …. The same goes for the length of an array: write bands.length > 0 &&, not bands.length &&.