Výchozí hodnoty

Někdy rodič nemá hodnotu pro každou prop. Právě byla oznámena nová kapela, Sametový déšť, ale její pódium se zatím neví:

<KartaKapely nazev="Sametový déšť" />

Karta pak dostane za podium hodnotu undefined a na jeho místě neukáže nic. Lepší by bylo ukázat Bude upřesněno. Prop byste mohli zkontrolovat pomocí if, ale destrukturování má kratší způsob, výchozí hodnotu, která se píše za =:

export default function KartaKapely({ nazev, podium = "Bude upřesněno" }) {

Když rodič podium předá, karta ho použije. Když ne, podium je "Bude upřesněno". Výchozí hodnoty fungují v každém destrukturování, i v obyčejném JavaScriptu: const { podium = "Bude upřesněno" } = kapela;.

Výchozí hodnota se použije, jen když je prop undefined, tedy chybí. Prázdný text, podium="", je hodnota, takže karta ukáže prázdný text. A výchozí hodnota může být jakákoli: číslo jako lajky = 0 nebo booleovská hodnota jako hlavniHvezda = false.

Když se props nevejdou na jeden řádek, napište každou na samostatný:

export default function KartaKapely({
    nazev,
    podium = "Bude upřesněno",
    hlavniHvezda = false,
}) {