спасибо 👍

у меня такой вопрос: хочу по клику на кнопку развернуть во весь экран карту. Делаю массив классов, который потом соединяю методом join(' '). при клике на кнопку в массив залетает новый класс, который отвечает за разворачивание во весь экран. стейт обновляется, класс залетает, но почему-то не меняется на сайте, может кто помочь с этим?
ну и класснейм не меняется естественно

мутируешь массив

то есть?

ну ок, но это всё равно не решит мою проблему

решит

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

в таких случаях могу порекомендовать юзать библиотеку classNames. все лучше чем через джоины писать и мутировать состояние

parentNode.prepend(el)

Оч крутая штука. Если этот элемент уже есть на странице, то он просто перемещает его в начало.

Можно как то реализовать это на реакте?

у меня слайдер по кнопке перемещает див со слайдами на 200 px вправо/влево.

На  апи с домом используешь просто prepend и готово.

Через ref parentRef.prepend(childrenRef) - хотя я не уверен, что это сработает ибо реакт не очень любит такие вещи)

да изменение дом мимо него он терпит(

Загугли, append, как это реализуют на реакте

если мутация неизбежна мутируй первым!

в обработчиках меняю классы.

const animationClass = {
  'slider__item--show-to-left': false,
  'slider__item--show-to-right': false,
};

const handleShowNextSlide = () => {
  const nextIdx = ((currentIdx + 1) % chunkedCitiesWheaterList.length);
  animationClass['slider__item--show-to-left'] = true;
  animationClass['slider__item--show-to-left'] = false;
  // console.log('animationClass', animationClass);
  setCurrentIdx(nextIdx);
};

const handleShowPrevSlide = () => {
  const prevIdx = (
    (currentIdx + (slideElementsCount - 1)) % chunkedCitiesWheaterList.length
  );
  animationClass['slider__item--show-to-left'] = false;
  animationClass['slider__item--show-to-left'] = true;
  // console.log('animationClass', animationClass);
  setCurrentIdx(prevIdx);
};

потом при рендеринге их применяю:

const classes = cn({
  ...animationClass,
  slider__item: true,
  'slider__item--active': currentIdx === index,
});

console.log('classes', classes);

return (
  <li key={uniqueId()} className={classes}>
    {chunkedElement.map(renderCitiesWeatherItems)}
  </li>
);

Но вот сюда они всегда приходят в значении  false, не успевают обновиться я так понимаю.
Потому что, если выводить в консоль в обработчиках, то все норм.
Если вывести в консоль animationClass  во втором блоке, то там false

Как то победить эту проблему можно?

const animationClass = {
  'slider__item--show-to-left': false,
  'slider__item--show-to-right': false,
};

const handleShowNextSlide = () => {
  const nextIdx = ((currentIdx + 1) % chunkedCitiesWheaterList.length);
  animationClass['slider__item--show-to-left'] = true;
  animationClass['slider__item--show-to-left'] = false;
  // console.log('animationClass', animationClass);
  setCurrentIdx(nextIdx);
};

const handleShowPrevSlide = () => {
  const prevIdx = (
    (currentIdx + (slideElementsCount - 1)) % chunkedCitiesWheaterList.length
  );
  animationClass['slider__item--show-to-left'] = false;
  animationClass['slider__item--show-to-left'] = true;
  // console.log('animationClass', animationClass);
  setCurrentIdx(prevIdx);
};

const classes = cn({
  ...animationClass,
  slider__item: true,
  'slider__item--active': currentIdx === index,
});

console.log('classes', classes);

return (
  <li key={uniqueId()} className={classes}>
    {chunkedElement.map(renderCitiesWeatherItems)}
  </li>
);

Правильно — создать состояние для компонента, и взависимости от его состояние менять применяемые классы. В обработчиках менять классы немного странно. Либо я не правильно понял код

если нажата кнопка назад - одна анимация, если вперед - другая.

А где бы вы посоветовали задеплоить свое первое простое реакт приложение новичку? Раньше ничего не деплоил никогда. Мне бы чтобы не сильно по настройкам сложно было ну и бесплатно.

netlify