Handler als Props

In einer echten App stehen Buttons in eigenen Komponenten: Der Button Abstimmen steckt in der BandKarte. Aber was eine Stimme bewirkt, gehört zu App, die das ganze Programm hat und bald auch die Anzahl der Stimmen. Also schreibt App den Handler und gibt ihn jeder Karte als Prop. In App.jsx:

function handleAbstimmen(name) {
    console.log(`Deine Stimme: ${name}`);
}

return (
    <ul>
        {bands.map((band) => (
            <BandKarte key={band.id} band={band} onAbstimmen={handleAbstimmen} />
        ))}
    </ul>
);

Eine Funktion ist ein Wert wie jeder andere, sie kann also eine Prop sein, genau wie ein Text oder eine Zahl. BandKarte liest sie aus ihren Props und ruft sie auf, wenn ihr Button angeklickt wird. In BandKarte.jsx:

export default function BandKarte({ band, onAbstimmen }) {
    return (
        <li className="karte">
            <h2>{band.name}</h2>
            <button onClick={() => onAbstimmen(band.name)}>Abstimmen</button>
        </li>
    );
}

Bei einem Klick führt der Button die Pfeilfunktion aus, die onAbstimmen("Eulenchor") aufruft, und onAbstimmen ist handleAbstimmen aus App. Ein Klick in der Karte führt also Code in App aus. Die Karte muss nicht wissen, was eine Stimme bewirkt. Sie meldet nur, dass jemand für ihre Band abgestimmt hat.

Die Prop heißt onAbstimmen, wie onClick bei einem Button: on und das, was passiert ist. Die Funktion, die App übergibt, heißt handleAbstimmen. Das sind wieder Konventionen: Props für Handler beginnen mit on, Handler-Funktionen mit handle. Aber onAbstimmen ist eine gewöhnliche Prop. React ruft sie nicht von selbst auf, wie es onClick bei einem Button aufruft; es ist BandKarte, die sie aufruft.

Ein typischer Fehler: onClick={onAbstimmen} in der Karte. Dann ruft React onAbstimmen mit dem Ereignisobjekt statt mit dem Namen auf, und App gibt Deine Stimme: [object Object] aus.