Destrukturování props

Psát před každou prop props. je zdlouhavé, jakmile jich komponenta má víc. Kód v Reactu proto obvykle vytáhne props z objektu rovnou v parametrech, a to pomocí destrukturování, které znáte z kurzu JavaScriptu:

const { nazev, podium } = kapela;

V parametrech je to stejné, jen bez const a =. Složené závorky vytáhnou props z objektu, který React předá:

export default function KartaKapely({ nazev, podium }) {
    return (
        <article className="karta">
            <h3>{nazev}</h3>
            <p>{podium}</p>
        </article>
    );
}

Komponenta funguje stejně jako předtím, je ale kratší a hned na prvním řádku je vidět, jaké props bere. Takhle se komponenty píšou ve většině kódu v Reactu a od teď i v tomto kurzu.

Typické chyby:

• Zapomenuté složené závorky: function KartaKapely(nazev, podium). React předává jeden objekt, takže nazev je celý ten objekt se všemi props. Objekt React ukázat neumí, stránka je prázdná a konzole hlásí Objects are not valid as a React child (found: object with keys {nazev, podium}).
• Psaní props.nazev i po destrukturování. Parametr props už neexistuje, jen nazev, a konzole hlásí ReferenceError: props is not defined.