Обработка клика по элементу массива

Question

Подскажите, пожалуйста, как добавлять/удалять класс при клике кнопку?

Дан массив объектов, при клике на кнопку к элементу должен добавляться класс active, при повторном клике этот класс должен убираться. Пробовал через useState, но так класс добавляется ко всем элементам.

Также пробовал через ref, но почему то через classList.add('active') не происходит добавление ?‍♂️

Код:

import React from 'react'

function Card({ items }) {

  const onSelectItem = (item) => {
    ...?
  }

  return items.map((e, i) => {
    return (
      <div key={`${e.id + i}_${i}`} className="card">
          <div className="card__controls">
            <div
              className="card__fav button button--shadow"
              onClick={() => onSelectItem(e)}>
              <svg>...</svg>
            </div>
          </div>
      </div>
    )
  })
}

export default Card

Answer 1

Вы можете хранить состояние в самом массиве для каждого элемента:

import React from 'react'

function Card({ items, setItems }) {

 // вместо индекса лучше использовать уникальный ключ каждого элемента, если есть
  const onSelectItem = (item, index) => {
    setItems(items.map((v, idx)=>index===idx ? {...v, isActive: true} : v ))
  }

  return items.map((e, i) => {
    return (
      <div key={`${e.id + i}_${i}`} className="card">
          <div className="card__controls">
            <div
              className=`card__fav button button--shadow ${e.isActive ? 'active' : ''}`
              onClick={() => onSelectItem(e, i)}>
              <svg>...</svg>
            </div>
          </div>
      </div>
    )
  })
}

export default Card

Или вам нужно будет создать useState массив с активными состояниями элементов items.

БЛОГ НА HUSL

Обработка клика по элементу массива

Ответы (1 шт):