Default Values

Sometimes the parent doesn't have a value for every prop. A new band has just been announced, Velvet Rain, but its stage isn't known yet:

<BandCard name="Velvet Rain" />

The card then gets undefined for stage and shows nothing in its place. It would be better to show To be announced. You could check the prop with if, but destructuring has a shorter way, a default value, written after =:

export default function BandCard({ name, stage = "To be announced" }) {

When the parent passes stage, the card uses it. When it doesn't, stage is "To be announced". Defaults work in any destructuring, in plain JavaScript too: const { stage = "To be announced" } = band;.

A default is used only when the prop is undefined, that is, missing. An empty text, stage="", is a value, so the card shows an empty text. And a default can be any value: a number such as likes = 0, or a boolean such as headliner = false.

When the props no longer fit on one line, write each on a line of its own:

export default function BandCard({
    name,
    stage = "To be announced",
    headliner = false,
}) {