>> Я правильно понимаю, что в props у нас попадает только id назначенный константой через деструктуризацию. А mockPockemon и stats мы создаем только для того, чтобы использовать в самом компоненте или все-таки они тоже каким-то образом появляются в пропсах?
Олег, не все переменные, что ты видишь внутри компонента, приходят через пропсы. Это могут быть просто другие переменные и константы из более высокой области видимости. В твоем случае mockPockemon - это просто константа, объявленная выше.
const mockPockemon: any = {
abilities: ['blaze', 'solar-power'],
exp: 240,
height: 17,
id: 6,
img: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/6.png',
is_default: true,
name: 'charizard',
order: 7,
stats: { hp: 78, attack: 84, defense: 78, specialAttack: 109, specialDefense: 85, speed: 100 },
types: ['fire', 'flying'],
weight: 905,
};
В IDE ты можешь курсор поставить на нужную переменную и нажать F12, чтобы IDE тебе показала откуда берется эта переменная.
В этом, скорее всего, и кроется ответ на все твои здесь вопросы. Условно, когда ты переходишь на страницу покемона (имею ввиду компонент Pokemon), то у тебя на вход через пропсы заходит только id, а данные покемона берутся из вот этой единой константы mockPockemon (для всех покемонов). В таком случае, судя по всему, у тебя все карточки отображаются одинаково. А чтобы такого не было, тебе надо в компоненте запилить еще получение данных покемона. То есть на вход у тебя есть id, надо затянуть из источника данные конкрертно этого покемона.