React. Присвоение класса тегу по таймауту. Как реализовать?

Всем привет! У меня в jsx есть кнопка, отвечающая за лайк, и в неё я хочу добавить сложную анимацию. Сложность в том, что несколько классов должны присваиваться с некоторым промежутком времени. То есть кликнули, присвоился класс, через секунду второй. Компонента функциональная. Как правильно подойти к решению этой задачи? У меня все идеи сводятся к тому, что нужно юзать state (я использую redux), но это кажется избыточным. Простые решения, вроде функции, возвращающей классы по setTimeout, не заработали.

Сейчас у меня код выглядит примерно так.

    const likeAnimation = s.animation + ' ' + s.someClass;
    
    return (
      <button
         onClick={() => toggleLike ()}
         className={s.likeButton + ' ' +
           (props.photo.liked_by_user ? '' : likeAnimation)
      }>
         {props.photo.likes}
      </button>
    )

Без таймаута всё хорошо работает. Задача в том, чтобы по клику сначала добавился s.animation, а через определённое время s.someClass.

Примеры моего неработающего кода с использованием setTimeout приводить не буду - их было много и я вконец запутался.


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