Как получить информацию по api?

ну так во втором варианте всё успешно вытаскивается:

data.genres

Из-за чего возникает ошибка на лидкоде при решении на js?

map() создаёт новый массив

Из-за чего возникает ошибка на лидкоде при решении на js?

Очевидно, что решить эту задачу нужно без использования Set(), иначе бы от неё не было смысла. Нужно внимательно читать условия и решать по ним.

Как получить данные по API?

let response; здесь не нужно.

Для console.log() не обязательно выделять свой then()

fetch('https://api.opensea.io/api/v1/bundles?owner=0x30f2449b71a67bb22e09eee89438431686189068&limit=20&offset=0')
.then(response => response.json())
.then(response => {
  console.log(response);
  alert(response.bundles[0].maker.user.username);
});

А лучше через async await:

async function getUsername() {
  const response =  await fetch('https://api.opensea.io/api/v1/bundles?owner=0x30f2449b71a67bb22e09eee89438431686189068&limit=20&offset=0');
  const result = await response.json();
  alert(result.bundles[0].maker.user.username);
}

Card в Material UI, как с этим работать)?

<Container className={classes.cardGrid} maxWidth="md">
      <Grid container spacing={2}>

        <Grid item xs={6}>
          <Card className={classes.card}>...
          </Card>
        </Grid>

        <Grid item xs={6}>
          <Card className={classes.card}>...  
          </Card>
        </Grid>

      </Grid>
    </Container>

Как удалить Head после получения Html?

Если нужно получить весь блок с id="comments":

const comments = commentsParsedPage.querySelector('#comments');

и форму отправки

Формы отправки, разумеется, работать не будут.

Как повесить MutationObserver на мой скрипт?

Этот ответ на вопрос про MutationObserver.

Для изменения класса сразу после загрузки страницы нужно добавлять соответствующую проверку проверку, т.к. MutationObserver тут не поможет.

Как повесить MutationObserver на мой скрипт?

Я так понимаю, счётчик с нулем сразу появляется при загрузке страницы. А этот код (как и обсервер) будет менять класс только при изменении счётчика. Поэтому в любом случае после загрузки страницы надо делать отдельную проверку, если нужно скрыть все счётчики с нулем. А вместо обсервера добавить изменение класса и в эту функцию

$('.yith-wcwl-items-count').html( data.count ).toggleClass('hidden', data.count === 0)

Как повесить MutationObserver на мой скрипт?

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

Как повесить MutationObserver на мой скрипт?

Судя по перебору в вопросе, элементов 'yith-wcwl-items-count' несколько. Поэтому надо вешать обработчик на элемент выше по дереву, а не на все 'yith-wcwl-items-count'.

При первой загрузке элементы 'yith-wcwl-items-count' могут сразу быть странице. То есть не будет мутаций, которые отобразятся в MutationObserver. Тогда нужно при загрузке проверять элементы отдельно.

Не могу понять, в чем ошибка?

https://developer.mozilla.org/ru/docs/Web/API/NodeList (причем со всеми текстовыми элементами, в т.ч. пробелами и переносами)

[...a.querySelectorAll('input')].reduce((acc, x) => acc + x.value, '')

или

Array.from(a.querySelectorAll('input'), (input) => input.value).reduce((acc, val) => acc + val)

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

Возможно внутри кнопки есть какие-то элементы, тогда можно заменить проверку класса на e.target.closest('button')

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

Очевидно, что нужно подставить класс из разметки и будет работать: e.target.classList.contains('btn')

Логика же простая - если клик на кнопке, ничего не делать.

Можно через проверку тега вместо класса: e.target.tagName === 'BUTTON'

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

Что именно не работает? Ошибки в консоли?
Без разметки это всё равно наугад получается.

Как работает этот код?

const { users } = data тоже самое, что и const users = data.users

const { data, error } = useSWR('{ users { name } }', fetcher)

Здесь функция useSWR() возвращает объект. Из этого объекта достаются переменные data и error. Примерно тоже самое, что и:

const myObject = useSWR('{ users { name } }', fetcher);
const data = myObject.data;
const error = myObject.error;

Т.е. это работает только в реакте, а в нативном js подобное не прокатит?

В нативном тоже можно. Только надо помнить, что map() возвращает массив. Поэтому его надо привести к строке через join() и вставлять эту строку как HTML в нужном месте.

Почему функция click не видит даже прототип функции родителя?

У меня при тестировании все варианты работают.

Ошибки какие-нибудь есть в консоли?

А в третьем варианте - найти нужный элемент и добавить ему, например, свой класс. А затем.click('.my-class').

Как исправить функцию что бы в результате mapp1convert выдавал значение 1?

Проявить немного логики.

spoiler

Поделить строку на подстроки между X.

spoiler

Посчитать длину всех подсрок, где есть 1 (если в подстроке есть 1, значит все инфицированы). И посчитать остальное, что нужно в ответе задачи.

Как добавлять/удалять класс при наведении?

useState() сохраняет в currentActive просто значение, в вашем случае ссылку из items.

То есть эта ссылка как бы служит уникальным идентификатором элемента.

Если ссылка на первый элемент заранее неизвестна, можно просто сделать useState(items[0])

Как добавлять/удалять класс при наведении?

Есть же список элементов items

items.map( el => вот какое значение el у первого элемента, такое и нужно передать в useState()

Как добавлять/удалять класс при наведении?

useRef используется как крайний случай для доступа к элементу, а не для его рендеринга в другом месте.