Значения по умолчанию

Иногда у родителя нет значения для каждого пропа. Только что объявили новую группу, «Бархатный дождь», но её сцена пока неизвестна:

<BandCard name="Бархатный дождь" />

Тогда карточка получает для stage значение undefined и ничего не показывает на его месте. Лучше показать Сцена уточняется. Можно проверить проп через if, но у деструктуризации есть способ короче — значение по умолчанию, которое пишется после =:

export default function BandCard({ name, stage = "Сцена уточняется" }) {

Когда родитель передаёт stage, карточка использует его. Когда не передаёт, stage равен "Сцена уточняется". Значения по умолчанию работают в любой деструктуризации, в обычном JavaScript тоже: const { stage = "Сцена уточняется" } = band;.

Значение по умолчанию используется только тогда, когда проп равен undefined, то есть отсутствует. Пустой текст, stage="", — это значение, поэтому карточка покажет пустой текст. А значением по умолчанию может быть что угодно: число, например likes = 0, или логическое значение, например headliner = false.

Когда пропсы перестают помещаться в одну строку, пишите каждый в отдельной строке:

export default function BandCard({
    name,
    stage = "Сцена уточняется",
    headliner = false,
}) {