Как реализовать лайки?

Question

[Елена]

Индикатор активного лайка зависит от класса, который добавляется если id лайка совпадает с id пользователя. Кода только страница загружается то все выводится нормально, а вот когда происходит клик по лайку, я не понимаю как мне изменить класс.

function Like() {
  const likeActive = (el) => el.likes.some(like => like._id === "ldjdljdljl030430430dmcdl");
  return (<button className={` ${likeActive(el) && 'likeActive'}`}></button>)
}

Answer 1

[Alexandroppolus]

Клик по лайку отправит запрос на сервер. Придет ответ, по которому данные о лайках (скорее всего, массив el.likes) обновятся. Если они правильно лежат в стейт-манагере, то компонент сам перерисуется.

кстати, https://www.npmjs.com/package/classnames

Comments

[Елена]

Alexandroppolus где-то встречала про classNames, так и не поняла) className работает с условиями, хотя там ставится false, если выражение не прошло)
Получается лайк надо сделать отдельным компонентом?

[Alexandroppolus]

Елена,

import cn from 'classnames';
...
<button className={cn({ likeActive: likeActive(el) })}></button>

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

лайк уже отдельный компонент. Просто в Реакте не нужно думать "как изменить класс". Думай, как изменить состояние. А класс (и всё остальное, что надо поменять) уже поменяется сам.

[Елена]

Alexandroppolus, спасибо, с отдельным компонентом получилось)