Алексей

childNodes включает не только элементы, но и тексты, комментарии, переносы строк. После парсинга p элементы находятся внутри текстовых переносов строк /n, поэтому когда производится проверка if ( e.nodeType !== Node.ELEMENT_NODE ) return; они игнорируются. Так что если требуется перебрать только элементы всегда нужно использовать children, а не childNodes. В данном случае все переносы строк буду проигнорированы и элементы p преобразуются как нужно.

function testFn(node) {
  for (const child of node.children) {
    testFn(child);
    if ( child.nodeName !== 'LI' ) {
      child.replaceWith( ...child.childNodes );
    }
  }
}

Например, так
добавить css:

#comp04 div .selected {
  background: #FF0000;
}

И заменить newColor:

function newColor(e) {
  const element = e.target;
  if (element.classList.contains('selected')) {
    e.target.classList.remove('selected');
  } else {
    e.target.classList.add('selected');
  }
}

HitGirl объясню в чем проблема. Да, фиксированный элемент фиксируется относительно вьюпорта браузера и остается фиксированным при скролле, но в данном случае у вас у родителя (container) установлено свойство container-type: inline-size;
но при установке некоторых свойств они влияют на фиксированно спозиционированные элементы и те становятся позиционируемыми относительно родительского элемента, устанавливающего это свойство, т.е. в данном случае родителя (container) и больше не являются фиксированными относительно вьюпорта браузера.

Вот список всех таких свойств:
filter
transform
backdrop-filter
perspective
contain
container
transform-style
content-visibility

container и в частности container-type в принципе не стоит использовать пока, т.к. 76% всего глобальная поддержка.
В данном случае заменить fixed элемент на sticky самое простое, как вы и сделали. Альтернативный вариант через js получить ширину container и установить ее для mobileSidebar, если требуется иногда прям fixed оставить

Самый старый и простой метод - float:

.tab img {
    height: 200px;
    float: left;
}

Но лучше tab сделать флекс контейнером и потом уже позиционировать внутри элементы как угодно, но в данном случае больше ничего и не нужно:

.tab {
    outline: 5px solid red;
    width: 80%;
    height: 200px;
    margin-bottom: 10px;
    display: flex;
}

Начиная с Node.js 17й версии там теперь используется OpenSSl 3.0, который, видимо, не поддерживается в одной из зависимостей стайлед компонентов.
В качестве временного решения либо откатить ноду на 16ю версию, либо запускать с параметром --openssl-legacy-provider. Можно еще в старт скрипт прописать

"start": "react-scripts --openssl-legacy-provider start"

Опечатка - у вас передается payOlad, а данные в редюсере берутся из action.payload. Рекомендую поставить плагины, типа code spell checker, очень помогает.

Баг ли это или так и было задумано, но с justify-content: flex-end и скроллом во всех браузерах есть проблемы и в одном контейнере они вместе не работают.
Самое простое решение (на мой взгляд) - это перенести скролл в контейнер выше.

вот пример: https://codepen.io/slide13/pen/VwrrOeE

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

Далее, самый простой вариант - это ограничение на уровне роутинга, тут все понятно в целом, когда перед переходом на отдельную страницу проверяется наличие прав, иначе показываем заглушку, что в этот раздел доступ ограничен.

Если же требуется разделить на уровне ui одной страницы, когда у нас есть кнопка редактирования данных, например, но обычный юзер может только смотреть, а кнопка должна быть активна редактору/админу, то это уже придется делать на уровне компонентов и отдельной проверки определенных правил для конкретной роли.

Например, я решал такую задачу следующим способом:
1. Создал объект правил доступа для различных компонентов/страниц.

const rules = {
  articles: {
    create: 'articles:create',
    edit: 'articles:edit'
  }
}

и так для проверки каждого требуемого правила, в котором возможна вариативность для разных уровней доступа, формат - компонент + доступные для него действия, но тут по желанию, требуется просто разграничить уникальность по компонентам.

2. Затем создал объект с уровнями доступа и доступными им правилами, для каждой роли это просто Set в который загоняются доступные действия из правил.

3. Ну и функция, которая на вход принимает правило и по текущей роли пользователя ищет в Set коллекции это самое правило, нашли - значит доступно, вернули true

Далее в нужном компоненте дергаем нашу функцию проверки прав, передавая туда правило для проверки доступа. Например, у нас просто обычный юзер залогинился, а не редактор.
Вызываем checkPermission(rules.articles.edit), если функа вернула false, то блокируем или скрываем кнопку редактирования статьи, ну и т.д.

Редактирование уровней доступа у нас в одном месте, на это же и редактор в целом написать можно будет отдельный, чтобы в коде не править, ну и хранить в таком формате доступы на бэке тогда и просто присылать на фронт открывая/закрывая/изменяя нужные разделы для определенных ролей и т.д.

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

Вам сюда - newline-after-import

usersList.forEach(user => console.log(user.company.name))

Так работает из-за StrictMode в реакте, потому что в этом режиме на этапе разработки Реакт делает дополнительную проверку и делает вызовы некоторых методов дважды (собственно, это и видно в консоли):

Строгий режим не способен автоматически обнаруживать побочные эффекты, но помогает их отследить, сделав более детерминированными. Такое поведение достигается путём двойного вызова следующих методов:

1. Методы constructor, render, и shouldComponentUpdate классового компонента
   
2. Статический метод классового компонента getDerivedStateFromProps
   
3. Тело функционального компонента
   
4. Функции обновления (первый аргумент setState)
   
5. Функции, переданные в useState, useMemo, или useReducer
   

В продакшен сборке будет все ок, можно проверить убрав обертку StrictMode, тогда в теле компонента и в useEffect значение test будет одинаковым и вызываться console.log("component", test); будет только один раз при вводе в инпут.

Также, как и с обычным input type="checkbox" в реакт - либо передаете значение checked в компонент сами и функцию onChange для изменения этого значения, либо через ref, что в данном случае проще будет

Документация

Вот ответ с MDN

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Подозреваю, что проблема в https и запрос на http://localhost:5000/add-user/ будет работать. Для https нужен ssl сертификат, а в коде сервера не вижу создания https сервера.