Handler mit Argumenten

Oft bedient ein Handler viele Buttons, und jeder Button muss ihm etwas anderes sagen: für welche Band du abstimmst, welchen Tag du sehen willst. Der Handler hat also einen Parameter:

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

Aber wie übergibst du das Argument? onClick={handleAbstimmen("Eulenchor")} ist ein Aufruf, der Fehler aus dem Quiz: Er würde sofort ausgeben, beim Rendern, und nie bei einem Klick. Setze den Aufruf stattdessen in eine Pfeilfunktion:

<button onClick={() => handleAbstimmen("Eulenchor")}>Abstimmen</button>

() => handleAbstimmen("Eulenchor") ist eine neue Funktion ohne Parameter. Das bekommt React und ruft es beim Klick auf, und erst dann ruft sie handleAbstimmen() mit dem Argument auf. Handler mit Argumenten schreibst du auf diese Weise ständig, auch in Listen:

{bands.map((band) => (
    <li key={band.id}>
        {band.name}
        <button onClick={() => handleAbstimmen(band.name)}>Abstimmen</button>
    </li>
))}

Jeder Button bekommt seine eigene Pfeilfunktion mit seiner eigenen Band: Der Button der Mondkatzen ruft handleAbstimmen("Mondkatzen") auf, und der Button des Eulenchors ruft handleAbstimmen("Eulenchor") auf. So kannst du alles übergeben: eine Id, einen Text oder das ganze Objekt, wie in handleInfo(band).

Braucht ein Handler kein Argument, braucht er auch keine Pfeilfunktion: onClick={handleKaufen} genügt. Die Pfeilfunktion ist nur dazu da, das Argument zu übergeben.