Obsluha v props

Ve skutečné aplikaci jsou tlačítka ve vlastních komponentách: tlačítko Hlasovat je v komponentě KartaKapely. Co hlas udělá, ale patří do App, která má celý program festivalu a brzy i počty hlasů. App proto obsluhu napíše a každé kartě ji předá jako prop. V App.jsx:

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

return (
    <ul>
        {kapely.map((kapela) => (
            <KartaKapely key={kapela.id} kapela={kapela} onHlasovat={hlasuj} />
        ))}
    </ul>
);

Funkce je hodnota jako každá jiná, takže může být v props stejně jako text nebo číslo. KartaKapely si ji z props vezme a zavolá ji, když se klikne na její tlačítko. V KartaKapely.jsx:

export default function KartaKapely({ kapela, onHlasovat }) {
    return (
        <li className="karta">
            <h2>{kapela.nazev}</h2>
            <button onClick={() => onHlasovat(kapela.nazev)}>Hlasovat</button>
        </li>
    );
}

Po kliknutí tlačítko spustí šipkovou funkci, ta zavolá onHlasovat("Sový sbor") a onHlasovat je funkce hlasuj z App. Kliknutí v kartě tak spustí kód v App. Karta nemusí vědět, co hlas udělá. Jen ohlásí, že někdo hlasoval pro její kapelu.

Prop se jmenuje onHlasovat, podobně jako onClick u tlačítka: on a co se stalo. Funkce, kterou App předává, je sloveso hlasuj. I to jsou zvyklosti: props pro obsluhy začínají on (v anglických projektech třeba onVote) a obsluhy dostávají slovesa (anglicky handleVote). onHlasovat je ale obyčejná prop. React ji sám nezavolá, jako volá onClick u tlačítka; volá ji KartaKapely.

Typická chyba: onClick={onHlasovat} v kartě. React pak zavolá onHlasovat s objektem události místo názvu a App vypíše Váš hlas: [object Object].