0
I’m studying React and Next with Typescript and I tried to consume pokeAPI, when codar I came across an error while picking up the image, in JSON it appears as
Official-artwork
this hyphen does not allow me to call this image, while the other
dream_world
that has the name with _ I can make the call without problems
import Head from 'next/head';
import Link from 'next/link';
import Image from 'next/image';
import styles from '../styles/home.module.scss';
import { apiBase } from '../lib/pokemon';
type poke = {
id: string,
name: string,
types: string,
info: string
}
type HomeProps = {
poke: poke[]
}
export default function Home({poke}: HomeProps) {
return (
<div>
<Head>
<title>PokéFan Company</title>
</Head>
<header className={styles.primaryHeader}>
<h1>PokéFan Company</h1>
</header>
<main className={styles.pokedex}>
<ul className={styles.listPokemon}>
{poke.map((poke, index) => (
<li key={index} className={styles.pokemon}>
<Link href={`/pokemon/${index + 1}`}>
<a>
<Image width={120} height={120} src={poke.sprites.other.official-artwork.front_default} alt={poke.name} objectFit="scale-down" />
<div className={styles.headerPokemon}>
<strong>{poke.name}</strong>
<span>{poke.id}</span>
</div>
</a>
</Link>
</li>
))}
</ul>
</main>
</div>
)
}
export async function getStaticProps(context) {
const getPokemonUrl = id => `https://pokeapi.co/api/v2/pokemon/${id}`;
const pokemonPromisses = []
for (let i = 1; i <= 50; i++) {
pokemonPromisses.push(fetch(getPokemonUrl(i)).then(response => response.json()))
}
const poke = Promise.all(pokemonPromisses)
.then(poke => {
return poke
})
return {
props: {
poke: await poke,
}
}
}
here is my code the problem is in the hyphen I wanted to know how I can call the Official-artwork, below I will provide a part of the json file
"sprites": {
"back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/59.png",
"back_female": null,
"back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/59.png",
"back_shiny_female": null,
"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/59.png",
"front_female": null,
"front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/59.png",
"front_shiny_female": null,
"other": {
"dream_world": {
"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/59.svg",
"front_female": null
},
"official-artwork": {
"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/59.png"
}
},