Обработчики с аргументами

Часто один обработчик обслуживает много кнопок, и каждая должна сообщить ему своё: за какую группу вы голосуете, какой день хотите посмотреть. Поэтому у обработчика есть параметр:

function handleVote(name) {
    console.log(`Ваш голос: ${name}`);
}

Но как передать ему аргумент? onClick={handleVote("Совиный хор")} — это вызов, та самая ошибка из викторины: строка выведется сразу, при отрисовке, и никогда — при клике. Вместо этого оберните вызов в стрелочную функцию:

<button onClick={() => handleVote("Совиный хор")}>Голосовать</button>

() => handleVote("Совиный хор") — это новая функция без параметров. Её и получает React и вызывает при клике, и только тогда она вызывает handleVote() с аргументом. Обработчики с аргументами вы будете писать так постоянно, в том числе в списках:

{bands.map((band) => (
    <li key={band.id}>
        {band.name}
        <button onClick={() => handleVote(band.name)}>Голосовать</button>
    </li>
))}

У каждой кнопки своя стрелочная функция и своя группа: кнопка группы «Лунные коты» вызывает handleVote("Лунные коты"), а кнопка группы «Совиный хор» — handleVote("Совиный хор"). Так можно передать что угодно: id, текст или весь объект, как в handleInfo(band).

Когда обработчику аргумент не нужен, стрелочная функция тоже не нужна: хватит onClick={handleBuy}. Стрелочная функция нужна только для того, чтобы передать аргумент.