Klíče

React ukáže seznam a pak se data změní: na začátek přibude kapela, jiná koncert zruší, seznam se seřadí. React pak nevytváří celý seznam na stránce znovu. Porovná nový seznam s tím, který je na stránce, a změní jen to, co je jinak. K tomu ale potřebuje vědět, která položka je která: je druhá položka pořád ta samá kapela jako předtím, nebo nová?

K tomu slouží klíč: jméno každé položky, podle kterého ji React pozná. Napíšete ho do atributu key prvku, který vrací map():

const podia = [
    { id: 1, nazev: "Hlavní pódium" },
    { id: 2, nazev: "Stan" },
    { id: 3, nazev: "Lesní scéna" },
];

export default function App() {
    return (
        <ul>
            {podia.map((podium) => (
                <li key={podium.id}>{podium.nazev}</li>
            ))}
        </ul>
    );
}

Díky klíči React ví, že položka s klíčem 3 je Lesní scéna, ať je v seznamu kdekoli. A varování z minulého cvičení zmizí.

Pravidla pro klíče:

• Klíč musí být jedinečný mezi položkami jednoho seznamu. (Dva různé seznamy můžou mít stejné klíče.)
• Pro tutéž položku musí zůstat stejný. Vezměte ho z dat, obvykle je to její id. I proto mají data ze serverů a databází id. Když jsou položky texty, které se neopakují, může být klíčem přímo text: key={nazev}.
• Klíč se na stránce neukáže a do props nepatří: komponenta ho přečíst nemůže.

Proč ne pozice v poli? map() dává své funkci pozici jako druhý argument a s key={index} varování taky zmizí. Jenže když přibude kapela na začátek, posune se každá další o pozici dál a dostane nový klíč. React si pak myslí, že první položka je pořád ta, kterou znal, a položky si splete. Vadí to, jakmile si položky něco pamatují (to přijde v lekci Stav): lajky jedné kapely by pak připadly jiné. Klíče z id se se změnou pořadí nemění.