Props destrukturieren

Vor jede Prop props. zu schreiben wird lang, sobald eine Komponente mehrere hat. Deshalb holt React-Code die Props meistens gleich in den Parametern aus dem Objekt, mit Destrukturierung, die du aus dem JavaScript-Kurs kennst:

const { name, buehne } = band;

In den Parametern ist es dasselbe, nur ohne const und =. Die geschweiften Klammern holen die Props aus dem Objekt, das React übergibt:

export default function BandKarte({ name, buehne }) {
    return (
        <article className="karte">
            <h3>{name}</h3>
            <p>{buehne}</p>
        </article>
    );
}

Die Komponente funktioniert genau wie vorher, ist aber kürzer, und ihre erste Zeile verrät, welche Props sie nimmt. So werden Komponenten in den meisten React-Projekten geschrieben, und im Rest dieses Kurses auch.

Typische Fehler:

• Die geschweiften Klammern vergessen: function BandKarte(name, buehne). React übergibt ein einziges Objekt, name ist also dieses ganze Objekt mit allen Props darin. React kann kein Objekt anzeigen, die Seite ist also leer, und die Konsole sagt Objects are not valid as a React child (found: object with keys {name, buehne}).
• Nach dem Destrukturieren trotzdem props.name schreiben. Es gibt kein props mehr, nur noch name, und die Konsole sagt ReferenceError: props is not defined.