0xD34F

Изучаю React по видеокурсу на YouTube

Изучение принято начинать с документации.

написал код символ в символ, как на видео, перепроверил с примером в репозитории учителя, но у меня не работает анимация

Этому видео два с половиной года. Как думаете, могли ли за это время случиться какие-то изменения в используемой библиотеке? Такие, что клиентский код, ранее бывший рабочим, стал делать что-то не то. Я лично думаю, что могли.

The prop `timeout` is marked as required in `CSSTransition`, but its value is `undefined`

Что тут непонятного? Отсутствует, должен быть - ну так добавьте.

И, конечно, никакой TransitionGroup для того, что вы пытаетесь сделать, не нужен. Вместо

<TransitionGroup>
  {isLogoVisible && (
    <CSSTransition classNames="option">
      ...

пусть будет

<CSSTransition in={isLogoVisible} unmountOnExit timeout={2000} classNames="option">
  ...

function Switch({ options, value, onChange }) {
  const highlight = useRef();

  useEffect(() => {
    const activeButton = highlight.current.closest('.c-switch').querySelector('.is-active');
    highlight.current.style.width = `${activeButton?.offsetWidth ?? 0}px`;
    highlight.current.style.transform = `translateX(${activeButton?.offsetLeft ?? 0}px)`;
  }, [ value ]);

  return (
    <div className="c-switch">
      <div className="c-switch__highlight" ref={highlight}></div>
      {options.map(n => (
        <button
          key={n.value}
          className={n.value === value ? 'is-active' : ''}
          onClick={() => onChange(n.value)}
        >{n.text}</button>
      ))}
    </div>
  );
}

https://jsfiddle.net/4hbkm9e8/

Собрать новый массив:

const newArr = arr.filter((n, i, a) => !i || a[i - 1] !== n);

Удалить из существующего массива:

let numDeleted = 0;

for (let i = 0, prev = !arr[0]; i < arr.length; prev = arr[i++]) {
  arr[i - numDeleted] = arr[i];
  numDeleted += arr[i] === prev;
}

arr.length -= numDeleted;

или

for (let i = arr.length; --i > 0;) {
  if (arr[i] === arr[i - 1]) {
    arr.splice(i, 1);
  }
}

или

arr.reduceRight((_, n, i, a) => i && n === a[i - 1] && a.splice(i, 1), null);

или

arr.splice(0, arr.length, ...arr.filter((n, i, a) => !i || a[i - 1] !== n));

Object.values(arr.reduce((acc, { category, ...n }) => (
  (acc[category.id] ??= { ...category, tanks: [] }).tanks.push(n),
  acc
), {}))

Сортируем существующий массив:

function sort(arr, order, key = n => n) {
  const positions = new Map(order.map((n, i) => [ n, i ]));
  const getPosition = n => positions.get(key(n)) ?? Number.MAX_SAFE_INTEGER;

  return arr.sort((a, b) => getPosition(a) - getPosition(b));
}

Собираем отсортированный новый:

function sorted(arr, order, key = n => n) {
  const ordered = new Map(order.map(n => [ n, [] ]));
  const unordered = [];

  arr.forEach(n => (ordered.get(key(n)) ?? unordered).push(n));

  return [].concat(...ordered.values(), unordered);
}

Примеры использования:

a1 = [ '999', '290', '999', '222', '333', '987', '309', '666', '999' ];
a2 = [ '999', '222', '666' ];
sorted(a1, a2) // [ '999', '999', '999', '222', '666', '290', '333', '987', '309' ]


a1 = [ 12, 34, 6, 2, 55, 523, 23, 333, 16, 51 ];
a2 = [ 3, 5, 2 ];
sorted(a1, a2, n => +`${n}`[0]) // [ 34, 333, 55, 523, 51, 2, 23, 12, 6, 16 ]


a1 = [ 666, 'xxx', () => [], true, 1, () => null, false, 'aaa', [0] ];
a2 = [ 'boolean', 'string', 'function' ];
sort(a1, a2, n => typeof n);
a1 // [ true, false, 'xxx', 'aaa', () => [], () => null, 666, 1, [ 0 ] ]

.active {
  background: red;
}

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  t.closest('tr').classList.toggle('active', t.checked);
});

// или

document.querySelectorAll('table tr').forEach(function(n) {
  n.addEventListener('change', this);
}, e => e.currentTarget.classList.toggle('active', e.target.checked));

UPD. Наконец-то дождались, js теперь тут не нужен:

tr:has(.form-check-input:checked) {
  background: red;
}

const names = Array.from(
  document.querySelectorAll('#mainTable input:checked'),
  n => n.name
);

или

const names = Array.prototype.reduce.call(
  document.getElementById('mainTable').getElementsByTagName('input'),
  (acc, n) => (n.checked && acc.push(n.getAttribute('name')), acc),
  []
);

Два класса не нужно - уберите closed, пусть элементы по умолчанию будут скрыты:

- .box.closed .list {
-   display: none;
- }
+ .box .list {
+   display: none;
+ }
+ .box.opened .list {
+   display: block;
+ }

Так что переключать будем только класс opened. А чтобы снять класс у соседей, надо будет подняться до общего предка, и найти внутри него нужные элементы. Есть несколько вариантов:

const containerSelector = '.section';
const itemSelector = '.box';
const buttonSelector = '.control-label';
const activeClass = 'opened';


// jquery, как вы и хотели
$(itemSelector).on('click', buttonSelector, ({ delegateTarget: t }) => $(t)
  .toggleClass(activeClass)
  .closest(containerSelector)
  .find(itemSelector)
  .not(t)
  .removeClass(activeClass)
);

// или, к чёрту jquery;
// вешаем обработчик клика на каждый заголовок
const onClick = ({ currentTarget: t }) => t
  .closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove'](activeClass);
  }, t.closest(itemSelector));

document
  .querySelectorAll(`${containerSelector} ${buttonSelector}`)
  .forEach(n => n.addEventListener('click', onClick));

// или, добавляем обработчик клика один раз для всех
document.addEventListener('click', ({ target: t }) => t
  .closest(buttonSelector)
  ?.closest(containerSelector)
  ?.querySelectorAll(itemSelector)
  .forEach(n => n.classList[n.contains(t) ? 'toggle' : 'remove'](activeClass))
);

Кто-то невнимательно читал документацию:

Важное замечание о времени регистрации ссылок: поскольку ссылки создаются render-функцией, вы не сможете использовать их при первичной отрисовке — на тот момент они ещё не существуют! Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.

Соответственно, попытавшись что-то прочитать из $refs, вы получаете undefined, а попытка чтения свойства у udnefined - да, заканчивается ошибкой.

$fileCodes = [];
array_walk_recursive($array, function($v, $k) use(&$fileCodes) {
  if ($k === 'fileCode') {
    $fileCodes[] = $v;
  }
});

Используйте ref вместо reactive.

Интересно, а что имеет сказать документация по поводу функции обновления состояния? Да вот что:

React гарантирует, что идентичность функции setState стабильна и не изменяется при повторных рендерах.

Ничего оборачивать не надо.

Судя по

const appSingle = new Vue({

вы используете vue 2. В то время как имена классов соответствуют третьей версии (был ряд изменений):

.planslider-enter-from {

.planslider-leave-from {

Непосредственно к заявленной проблеме не относится, но мимо пройти никак нельзя:

<transition-group tag="div" class="single-estate-planimetry__slider" name="planslider" appear>
    <div v-if="index === currentPlanimetry"  :data-index="index" class="single-estate__descr-img" v-for="(item, index) in planimetry" :key="item.nome">

Заменить transition-group на transition. Убрать v-if и v-for. Сделать вычисляемое свойство, представляющее текущий элемент.

Object.keys(a).forEach(n => b.hasOwnProperty(n) && (a[n] = b[n]));

или

for (const [ k, v ] of Object.entries(b)) {
  if (a.hasOwnProperty(k)) {
    a[k] = v;
  }
}

Меняем transition на transition-group, сдвигаем его влево на ширину слайда; показываем слайды не с активного, а с предшествующего активному; чтобы не видеть, как первый слайд, ставший последним, уезжает в конец, задаём слайдам z-index. Вот говнокод.

function collectValues(target, ...sources) {
  const onInput = () => target.value = sources.map(n => n.value).join(', ');
  sources.forEach(n => n.addEventListener('input', onInput));
  return () => sources.forEach(n => n.removeEventListener('input', onInput));
}


collectValues(...document.querySelectorAll('input'));

Как это вообще работает?

Откройте документацию, и прочтите.

Как мне при срезе включать последний элемент списка?

Уберите -1, просто -3:.

data: () => ({
  items: Array.from({ length: 4 }, () => ({
    checked: false,
    value: '',
  })),
}),

<div v-for="(n, i) in items">
  <label>
    <input type="checkbox" v-model="n.checked">
    {{ i }}
  </label>
  <input v-if="n.checked" v-model="n.value">
</div>

<div class="error" v-if="$v.forms.additional.$dirty && $v.forms.additional.$invalid">

additional: this.visible ? { required } : {},

Не надо никаких поисков. Собираете данные в обычный объект или Map, где ключами будут значения свойства, по которому выполняется группировка, после обработки массива выдёргиваете из результата значения:

Object.values(arr.reduce((acc, { a, b }) => (
  (acc[a] ??= { a, items: [] }).items.push(b),
  acc
), {}))