Keys

React zeigt eine Liste an, und dann ändern sich die Daten: Eine Band kommt an den Anfang, eine andere sagt ab, die Liste wird sortiert. React zeichnet dann nicht die ganze Liste neu. Es vergleicht die neue Liste mit der auf der Seite und ändert nur, was anders ist. Dafür muss es wissen, welcher Eintrag welcher ist: Ist der zweite Eintrag noch dieselbe Band wie vorher, oder eine neue?

Dazu dient der Key (englisch für „Schlüssel“): ein Name für jeden Eintrag, an dem React ihn wiedererkennt. Du gibst ihn im Attribut key des Elements an, das map() zurückgibt:

const buehnen = [
    { id: 1, name: "Hauptbühne" },
    { id: 2, name: "Zelt" },
    { id: 3, name: "Waldbühne" },
];

export default function App() {
    return (
        <ul>
            {buehnen.map((buehne) => (
                <li key={buehne.id}>{buehne.name}</li>
            ))}
        </ul>
    );
}

Mit dem Key weiß React, dass der Eintrag mit dem Key 3 die Waldbühne ist, egal wo in der Liste er steht. Und die Warnung aus der vorigen Übung verschwindet.

Regeln für Keys:

• Ein Key muss unter den Einträgen einer Liste eindeutig sein. (Zwei verschiedene Listen dürfen dieselben Keys verwenden.)
• Er muss für denselben Eintrag immer gleich bleiben. Nimm ihn aus den Daten: Meistens ist das die id. Das ist einer der Gründe, warum Daten von Servern und aus Datenbanken Ids haben. Sind die Einträge Texte, die sich nie wiederholen, kann der Text selbst der Key sein: key={name}.
• Der Key wird nicht auf der Seite angezeigt, und er gehört nicht zu den Props: Eine Komponente kann ihn nicht lesen.

Warum nicht die Position im Array? map() gibt seiner Funktion die Position als zweites Argument, und key={index} lässt die Warnung ebenfalls verschwinden. Wird aber eine Band am Anfang eingefügt, rutscht jede andere Band eine Position weiter und bekommt einen neuen Key. React denkt dann, der erste Eintrag sei noch der, den es kannte, und wirft die Einträge durcheinander. Was das anrichtet, siehst du, sobald sich die Einträge etwas Eigenes merken (in der Lektion über State): Die Likes der einen Band landeten bei einer anderen. Keys aus Ids ändern sich nicht, wenn sich die Reihenfolge ändert.