sxivanov

const rootEl = useRef(null);

useEffect(() => {
  const onClick = e => rootEl.current.contains(e.target) || console.log('клик вне компонента');
  document.addEventListener('click', onClick);
  return () => document.removeEventListener('click', onClick);
}, []);

return (
  <div ref={rootEl}>
    ...
  </div>
);

В нормальном мире "кнопка" не должна никуда "вести". Кнопка запускает какой-либо процесс, за переход на другой URL же отвечает ссылка.
Если вы сделаете нормальную семантическую разметку: попадаем под "определённые условия", то рендерим div или выключенную кнопку (тут нужно смотреть по контексту), а не попадаем - обычную ссылку, то всё будет работать без всяких плясок с бубном.

sudo scutil --set HostName mac
Этого достаточно. Переустанавливать систему из-за такого пустяка точно не нужно ))
После перезапуска терминала получим ruslan@mac ~ %

MBP-Marina - это имя компьютера, а не имя пользователя

Выполни действия по этому линку, и будет тебе счастье: тыц

Это же просто vscode недонастроен. На работоспособности проекта это не сказывается

bgfilms.innerHTML += `<li class="promo__interactive-item">${item}<div class="delete"></div></li>`

Вы просто перезаписываете постоянно содержимое тега.

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

bgfilms.innerHTML += `<li class="promo__interactive-item">${item}<div class="delete"></div></li>`

Все намного проще чем кажется.
Когда нужна какая-нибудь анимация, то делайте так:
1) через css добавляете класс, который делает эту анимацию(animation или transform)
2) через js или jquery добавляете этот класс либо потом удаляете у элемента, который хотите анимировать

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