Как создать active для разных компонентов?

Question

Есть компонент ItemsList:

import React from 'react'

const ItemsList = ({items}) => {

  return (
    <ul className="items">
      {items.map(({comment}, index) => (
         <li 
            key={index} 
            className="item"
            >{comment}
         </li>
      ))}
    </ul>
  )
}

export default ItemsList

Использую я его так:

const Viem = () => {

  const obj = {
    test1: [
      {comment: 1},
      {comment: 2}
    ],
    test2: [
      {comment: 1},
      {comment: 2},
      {comment: 3}
    ]
  }

  return (
    <div className="content">
      <ItemsList items={obj.test1} />
      <ItemsList items={obj.test2} />
    </div>
  );
};

Я хочу сделать возможность кликать по item и добавлять им класс active.

Но, как мы видим, у нас компонент один, а передается два разных объекта и нужно что-бы у каждого был свой active.

Как это правильно сделать?

Для тех, кто не понял о чем я написал: скажем у нас есть киносайт, у него есть сериал и при просмотре сериала у нас есть возможность сменить серию или сезон. Использовать я хочу redux

Answer 1

Создадим компонент отображения списка, с возможностью выбрать один элемент(сделать его активным, установив нужный класс)

Создаем в компоненте ItemsList переменную состояния active, в которой будет находится индекс выбранного элемента массива(по умолчанию -1).

При клике на элемент списка, будем записывать индекс в состояние и при рендере проверять, если индексы совпали, то ставим данному элементу класс активного.

Если кликнули на тот же элемент, то класс активного будет снят(если это не надо, то заменить сеттер на setActive(index))

const ItemsList = ({items}) => {
  const [active, setActive] = useState(-1);
  
  return (
    <ul className="items">
      {items.map(({comment}, index) => (
        <li
          key={index}
          className={active === index ? 'activeItem' : 'item'}
          onClick={() => setActive(index !== active ? index : -1)}
        >{comment}
        </li>
      ))}
    </ul>
  )
}

Если надо, что бы у каждого li было свое собственное состояние, то декомпозируем компонент ItemsList на 2

const Item = ({ comment }) => {
  const [active, setActive] = useState(false);
  
  return (
    <li
      className={active ? 'activeItem' : 'item'}
      onClick={() => setActive(a => !a)}
    >{comment}
    </li>
  )
}

const ItemsList = ({items}) => {

  return (
    <ul className="items">
      {items.map(({comment}, index) => <Item comment={comment} key={index} />
      )}
    </ul>
  )
}

Теперь у каждого элемента есть свое состояние и клик по нему ставит или убирает класс активного.

БЛОГ НА HUSL

Как создать active для разных компонентов?

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

Создадим компонент отображения списка, с возможностью выбрать один элемент(сделать его активным, установив нужный класс)