Standardwerte

Manchmal hat der Parent nicht für jede Prop einen Wert. Eine neue Band wurde gerade angekündigt, Samtregen, aber ihre Bühne steht noch nicht fest:

<BandKarte name="Samtregen" />

Die Karte bekommt dann undefined für buehne und zeigt an dieser Stelle nichts an. Besser wäre es, Wird noch bekannt gegeben zu zeigen. Du könntest die Prop mit if prüfen, aber die Destrukturierung hat einen kürzeren Weg, einen Standardwert, der nach = steht:

export default function BandKarte({ name, buehne = "Wird noch bekannt gegeben" }) {

Wenn der Parent buehne übergibt, verwendet die Karte sie. Wenn nicht, ist buehne gleich "Wird noch bekannt gegeben". Standardwerte funktionieren in jeder Destrukturierung, auch in reinem JavaScript: const { buehne = "Wird noch bekannt gegeben" } = band;.

Ein Standardwert wird nur verwendet, wenn die Prop undefined ist, also fehlt. Ein leerer Text, buehne="", ist ein Wert, die Karte zeigt also einen leeren Text. Und ein Standardwert kann jeder Wert sein: eine Zahl wie likes = 0 oder ein Wahrheitswert wie hauptact = false.

Wenn die Props nicht mehr in eine Zeile passen, schreibe jede in eine eigene Zeile:

export default function BandKarte({
    name,
    buehne = "Wird noch bekannt gegeben",
    hauptact = false,
}) {