Props sind schreibgeschützt

Props gehen nur in eine Richtung: vom Parent zur Komponente. Der Parent bestimmt, was eine Karte zeigt, und die Karte zeigt es nur an. Eine Komponente ändert ihre Props nie, und React stellt das sicher. Das Props-Objekt ist gesperrt, und der Versuch, es zu ändern, endet mit einem Fehler:

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

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

Warum sind Props gesperrt? Sie gehören dem Parent. Er verwendet dieselben Daten vielleicht an anderer Stelle der Seite und erwartet, dass sie so bleiben, wie er sie übergeben hat. Wenn jede Komponente sie ändern könnte, könnte niemand mehr sagen, woher ein Wert auf der Seite kommt.

Braucht eine Komponente einen Wert, der aus ihren Props entsteht, legt sie dafür eine neue Variable an, und die Props bleiben, wie sie waren:

export default function BandKarte({ name }) {
    const lauterName = name.toUpperCase();
    return <h3>{lauterName}</h3>;
}

Und wenn etwas auf der Karte anders sein soll, ändere es dort, wo die Props herkommen: im Parent, der andere Werte übergibt.

Und Werte, die sich ändern, während die App läuft, etwa die Zahl der Likes nach einem Klick auf einen Button? Das sind keine Props. Eine Komponente hält sie in ihrem State, worum es in der Lektion State geht. Bis dahin stell dir Props wie die Argumente einer Funktion vor: Die Komponente liest sie und ändert sie nie.