Как добавить class активному (выбранному) элементу списка? (React)

Question

Ребята, подскажите есть функ.компонент, представляющий собой список из 3х элементов. Как к указанному ниже коду прикрутить функционал "активного" элемента (т.е. при нажатии на элемент списка к нему добавляется класс "selected")? В общем, чтобы получилось "переключалка" между 3-мя элементами списка, при обязательном одном (и только одном) активном. В начале загрузки всегда активный 1й элемент списка.

function ListItems() {
    const changeSelectedSort1 = () => {
        setSelected(!selected)
        alert('1я функция')
    }
    
    const changeSelectedSort2 = () => {
        setSelected(!selected)
        alert('2я функция')
    }
    
    const changeSelectedSort3 = () => {
        setSelected(!selected)
        alert('3я функция')
    }
    
    const arrListIcons = [
        {id: 1, classes: 'fas fa-random', selected: true, handler: changeSelectedSort1},
        {id: 2, classes: 'fas fa-sort-alpha-up', selected: false, handler: changeSelectedSort2},
        {id: 3, classes: 'fas fa-sort-alpha-up-alt', selected: false, handler: changeSelectedSort3},
    ]
    
    const [selected, setSelected] = useState('......')
    
    return (
        <ul style={styles.ul}>
            {arrListIcons.map(item => (
                <ListItem key={item.id}
                                  classes={selected ? `${item.classes} selected` : `${item.classes}`}
                                  onClick={item.handler}/>
            ))}
        </ul>
    );
}

export default ListItems;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Немного начал решать этот вопрос, но чувствую возиться с ним буду долго.

Нашел, чуть позже, такое решение тут - React / Как назначать классы по клику?

Но в моем варианте, сразу есть активный пункт. В общем буду рад любой помощи.

Answer 1

import React from "react";
import classNames from "classnames";

function Application() {
  const [selectedUser, setSelectedUser] = React.useState('9433967183154892');
  const [users, setUsers] = React.useState([
    {id: '9433967183154892'},
    {id: '3296199699013249'},
    {id: '5803790563847613'}
  ]);

  return (
    <React.Fragment>
      {users.map((user) => (
        <div
          key={user.id}
          className={classNames('user', {
            'user--state-selected': selectedUser === user.id
          })}
          onClick={() => setSelectedUser(user.id)}
        >
          {user.id}
        </div>
      ))}
    </React.Fragment>
  );
}

.user {
  color: green;
  cursor: pointer;
}
.user--state-selected {
  color: red;
}

БЛОГ НА HUSL

Как добавить class активному (выбранному) элементу списка? (React)

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