Předání props

Program je oznámený! Každá karta teď má ukázat svou kapelu. Komponenta dostává data od komponenty, která ji používá, a to přes props (z anglického properties, vlastnosti). Píšou se jako atributy v HTML:

<KartaKapely nazev="Noční vlaky" podium="Hlavní pódium" />
<KartaKapely nazev="Měsíční kočky" podium="Stan" />

React dá všechny props jedné karty do objektu a ten předá funkci komponenty jako argument. Parametr se obvykle jmenuje props a komponenta z něj props čte jako vlastnosti objektu:

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

Funkce je pro všechny karty stejná, ale každé zavolání dostane jiné props. U první karty je v props objekt { nazev: "Noční vlaky", podium: "Hlavní pódium" }, u druhé { nazev: "Měsíční kočky", podium: "Stan" }. Můžete se o tom přesvědčit sami: dejte do komponenty console.log(props); a konzole ukáže pro každou kartu jeden řádek:

{ nazev: "Noční vlaky", podium: "Hlavní pódium" }
{ nazev: "Měsíční kočky", podium: "Stan" }

Je to stejné jako parametry funkce v JavaScriptu: funkce je napsaná jednou a ten, kdo ji volá, rozhodne, s čím. Tady je to rodič, tedy komponenta, v jejímž JSX je <KartaKapely … />. Rodič rozhoduje, co která karta ukáže.

Názvy props si volíte sami. Jen dbejte na to, aby je rodič i komponenta psali stejně: nazev a Nazev jsou dvě různé props.