> Где повесить обработчик клика для кнопок при маппинге массива в React? (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Cyber Interactive

Стек: React

> Пример ответа

Обработчик клика для кнопок при маппинге массива в React следует вешать непосредственно на элемент кнопки внутри колбэка map(). Это обеспечивает доступ к данным конкретного элемента массива и правильную привязку контекста.

Пример:

JSX
function ButtonList({ items }) {
  const handleClick = (item) => {
    console.log('Clicked:', item.id);
  };

  return (
    <div>
      {items.map((item) => (
        <button key={item.id} onClick={() => handleClick(item)}>
          {item.label}
        </button>
      ))}
    </div>
  );
}

Ключевые моменты:

Обработчик определяется вне map() (в компоненте) для избежания пересоздания функций при каждом рендере, но вызывается внутри стрелочной функции в onClick.
Используйте key для каждого элемента, чтобы React эффективно обновлял DOM.
Если обработчик не требует данных элемента (например, просто onClick={handleClick}), можно передать ссылку на функцию без стрелочной обертки, но это редкость при маппинге.