Obsluha s argumentem

Jedna obsluha často slouží mnoha tlačítkům a každé jí potřebuje říct něco jiného: pro kterou kapelu hlasujete, který den chcete vidět. Obsluha proto má parametr:

function hlasuj(nazev) {
    console.log(`Váš hlas: ${nazev}`);
}

Jak jí ale argument předat? onClick={hlasuj("Sový sbor")} je volání, chyba z kvízu: vypsalo by se hned při vykreslení, a při kliknutí nikdy. Volání proto zabalte do šipkové funkce:

<button onClick={() => hlasuj("Sový sbor")}>Hlasovat</button>

() => hlasuj("Sový sbor") je nová funkce bez parametrů. Tu React dostane a zavolá ji při kliknutí, a teprve ona zavolá hlasuj() s argumentem. Takhle budete obsluhy s argumenty psát pořád, i v seznamech:

{kapely.map((kapela) => (
    <li key={kapela.id}>
        {kapela.nazev}
        <button onClick={() => hlasuj(kapela.nazev)}>Hlasovat</button>
    </li>
))}

Každé tlačítko dostane vlastní šipkovou funkci s vlastní kapelou: tlačítko Měsíčních koček zavolá hlasuj("Měsíční kočky") a tlačítko Sového sboru hlasuj("Sový sbor"). Předat tak můžete cokoli: id, text, nebo celý objekt, třeba ukazInfo(kapela).

Když obsluha žádný argument nepotřebuje, nepotřebuje ani šipkovou funkci: stačí onClick={kupVstupenky}. Šipková funkce je tu jen kvůli předání argumentu.