Это или ничего

Некоторым карточкам нужно что-то лишнее, чего нет у других: хедлайнеры, группы, которые закрывают день на главной сцене, получают значок. С условным оператором вторым значением был бы null, и React ничего не показывает:

{band.headliner ? <span className="badge">Хедлайнер</span> : null}

Есть более короткий способ, с &&:

{band.headliner && <span className="badge">Хедлайнер</span>}

В курсе JavaScript вы использовали &&, чтобы объединять условия. Но он умеет больше: он даёт одно из двух своих значений. Если левое считается ложью, && даёт левое и даже не смотрит на правое. Иначе он даёт правое:

console.log(true && "Хедлайнер");
console.log(false && "Хедлайнер");
console.log(undefined && "Хедлайнер");

Хедлайнер
false
undefined

Итак, для хедлайнера выражение — это значок. Для остальных групп оно равно false, а если у них вообще нет свойства headliner, то undefined, и для false, true, null и undefined React ничего не показывает.

Но осторожно с числами. 0 тоже считается ложью, поэтому 0 && … даёт 0. А числа React как раз показывает:

{band.likes && <p>Лайки: {band.likes}</p>}

Группа с 12 лайками покажет Лайки: 12, а группа без лайков — одинокий 0. Исправить это поможет условие, которое всегда true или false и никогда не число: band.likes > 0 && …. То же касается длины массива: пишите bands.length > 0 &&, а не bands.length &&.