Состояние и события

В этом решении мы создаём интерактивную кнопку лайка с использованием состояния и обработчиков событий.

Создание состояния

const [liked, setLiked] = useState(false);
const [likesCount, setLikesCount] = useState(42);

Хук useState принимает начальное значение и возвращает массив из двух элементов. Мы используем деструктуризацию массива, чтобы получить текущее значение (liked, likesCount) и функцию для обновления (setLiked, setLikesCount). Состояние liked хранит булево значение - лайкнут ли пост, а likesCount - количество лайков.

Обработчик события

const handleLike = () => {
    if (liked) {
        setLiked(false);
        setLikesCount

Функция handleLike проверяет текущее состояние и переключает его. Если пост уже лайкнут, мы убираем лайк и уменьшаем счётчик. Если нет - добавляем лайк и увеличиваем. Когда мы вызываем setLiked или setLikesCount, React перерисовывает компонент с новыми значениями.

Привязка события

<button onClick={handleLike}>

Мы передаём функцию handleLike в атрибут onClick. Важно передавать саму функцию, а не результат её вызова - поэтому без скобок. React вызовет эту функцию, когда пользователь кликнет на кнопку.

Условные классы

className={`like-button ${liked ? 'liked' : ''}`}

Мы используем шаблонную строку, чтобы динамически добавлять класс. Базовый класс like-button присутствует всегда, а класс liked добавляется только когда liked === true. Если условие ложно, добавляется пустая строка.

Условный рендеринг с тернарным оператором

{liked ? '❤️' : '🤍'}

Тернарный оператор условие ? значение1 : значение2 позволяет выбрать, что отображать. Если liked истинно, показываем красное сердце, иначе - белое.

Условный текст

{likesCount === 1 ? 'человеку нравится' : 'людям нравится'}

Мы используем тернарный оператор для правильного склонения слов. Когда лайк один, используем единственное число, иначе - множественное.

Условный рендеринг с оператором &&

{liked && (
    <p className="thank-you-message">
        ✨ Спасибо за лайк!
    </p>
)}

Оператор && работает так: если левая часть истинна, React рендерит правую часть. Если ложна - ничего не рендерит. Это короткая запись для условия "показать только если условие выполнено". Сообщение благодарности появляется только когда пост лайкнут.