Props jsou jen ke čtení

Props putují jedním směrem: od rodiče ke komponentě. Rodič rozhoduje, co karta ukáže, a karta to jen ukazuje. Komponenta své props nikdy nemění a React na to dohlíží. Objekt s props je zamčený a pokus o jeho změnu skončí chybou:

export default function KartaKapely(props) {
    props.nazev = props.nazev.toUpperCase();
    return <h3>{props.nazev}</h3>;
}

TypeError: Cannot assign to read only property 'nazev' of object '#<Object>'

(toUpperCase() funguje jako toLowerCase(), jen převádí na velká písmena.) Proč jsou props zamčené? Patří rodiči. Ten může stejná data používat i jinde na stránce a počítá s tím, že zůstanou, jak je předal. Kdyby je mohla měnit každá komponenta, nikdo by nepoznal, odkud se která hodnota na stránce vzala.

Když komponenta potřebuje hodnotu odvozenou z props, vytvoří si pro ni novou proměnnou a props zůstanou, jak byly:

export default function KartaKapely({ nazev }) {
    const velkymi = nazev.toUpperCase();
    return <h3>{velkymi}</h3>;
}

A když má být na kartě něco jinak, změňte to tam, odkud props přicházejí: v rodiči, který předá jiné hodnoty.

A co hodnoty, které se mění za běhu aplikace, třeba počet lajků po kliknutí na tlačítko? Takové hodnoty si komponenta drží ve svém stavu, o kterém je lekce Stav. Do té doby berte props jako argumenty funkce: komponenta je čte a nikdy je nemění.