> Для того чтобы получить первоначальное состояние useState({});
Уходи от такой формулировки. Это неправильная формулировка. Правильная такая: Для того чтобы получить состояние useState({});
Никогда не думай первоначальное это состояние или нет. Всегда думай - это текущее состояние. Не думай, что useState что-то устанавливает. Она, конечно, устанавливает, но только при первом вызове. То есть в последующие она не будет ничего устанавливать, а всегда (как и в первый раз) возвращать массив с двумя элементами. 1 - состояние. 2 - метод для установки нового состояния. Ты, конечно, можешь смотреть на то, что передал в useState, чтобы понимать, что туда будет установлено по умолчанию, но всегда должен думать только обо дном - что ты в итоге получишь из состояния. Так правильно думать в случае с реактом.
> Для того чтобы получить snapshot в аргументе setPokemons написал console.log('####: useEffectPokemon', snapshot.val()); после изменения состояния.
Опять неправильно. Вообще все неправильно.
Нельзя получить что-то в аргументе. Можно только передать в качестве аргумента, и можно получить из аргумента. А получить в аргументе - это бессмыслица. Получить можно в функции. И вот теперь разберись что у тебя в аргументах, кто передал эти аргументы и что ты делаешь с полученными аргументами.
А теперь самое главное: а кто тебе сказал, что handleClickCard обязательно вызывается? Ты смотрел исходный код PokemonCard? Там вообще ожидается свойство onCardClick? Оно там вообще обрабатывается? Или по какой такой логике ты считаешь, что любое передаваемое свойство обязательно доложно как-то обрабатывается?
Еще раз: прикладывай ссылку на проект. Кусок кода, вырванный из контекста - то же самое, что и предложение, вырванное из контекста.
И, посмотрев код твоего проекта учебного, могу сказать следующее: учебный проект - это конечно же хорошо. На нем интересней учиться. Но учишься ты совсем не тому, чему следует.
1. Create React App - это вот прям только для обучения. Боевые проекты на нем не следует делать. Если ты взял проект со стороны, то ОК. Если ты делаешь сам с нуля и взял его вместо того, чтобы взять https://github.com/prisma-cms/nextjs, то совсем не ОК.
2.
import s from './style.module.css';
import cn from 'classnames'
<div className={cn(s.pokemonCard, { [s.active]: isActive })}>
Забудь, что ты когда-то это видел. Не используй никогда и нигде. Я видел уже много людей, которые думали, что так норм. А потом открывали для себя styled-components и прозревали. Не учись тому, что не нужно и чему есть более правильные альтернативы.
3. Переставая писать в .js, пиши в .tsx
Если бы ты использовал TypeScript, то он бы тебе подсказал, что ты передаешь то, чего от тебя не ждут вообще, и сэкономил бы много времени.
Еще раз: не учи React + JavaScript, учи сразу React + TypeScript. Вопрос в нескольких днях. Но ты сразу встанешь на более правильный путь.
Вот тебе домашнее задание: Возьми теперь https://github.com/prisma-cms/nextjs и перенеси туда свой проект, сразу на TS. Можешь прям создать здесь проект и там вопросы задавай и задачи ставь. Я ближайшие часа три здесь еще буду, так что сразу смогу сопроводить. Вот перенесешь туда и сразу ощутишь разницу. И начнешь учиться в правильном ключе.