import React from 'react' import { useEffect, useState } from 'react' function PokemonCard() { const [pokemon, setPokemon] = useState([]) useEffect(() => { fetch('https://pokeapi.co/api/v2/pokemon/charizard') .then(res => res.json()) .then(setPokemon) },[]) const pokemonType = pokemon.types console.log(pokemonType) //HERE I GET THE ERROR pokemonType.map(x => console.log(x.type.name)) return ( <div> <h1>{pokemon.name}</h1> {/* <img src={pokemon.sprites.front_default}></img> */} {/* <h2>Type: {pokemonType}</h2> */} <h2>Height: {pokemon.height}</h2> <h2>Weight: {pokemon.weight}</h2> </div> ) } export default PokemonCard;este es el enlace para la api
https://pokeapi.co/api/v2/pokemon/charizard
cuando trato de ingresar a pokemon.types.type.name aparece un error que dice Uncaught TypeError: Cannot read properties of undefined (leyendo 'mapa') en PokemonCard (PokemonCard.js:16:1) en renderWithHooks (react-dom .desarrollo.j
Eso se debe a que pokemonType no está definido inicialmente. Intente usar el operador de encadenamiento opcional :
pokemonType?.map((x) => console.log(x.type.name));Responde por lo que intentaste en el comentario:
const pokemonType = pokemon.types?.[0]?.type.name;Si desea obtener los tipos representados, utilice esto:
function PokemonCard() { const [pokemon, setPokemon] = React.useState([]); React.useEffect(() => { fetch("https://pokeapi.co/api/v2/pokemon/charizard") .then((res) => res.json()) .then(setPokemon); }, []); function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } return ( <div> <h1>{pokemon.name}</h1> {pokemon.types && pokemon.types.map(({ type: { name } }) => ( <p key={name}>{capitalizeFirstLetter(name)}</p> ))} <h2>Height: {pokemon.height}</h2> <h2>Weight: {pokemon.weight}</h2> </div> ); } ReactDOM.render(<PokemonCard />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>map sobre la propiedad de tipos en el JSX. Tenga en cuenta que los objetos en la matriz de tipos no tienen propiedades de height o weight , por lo que asumo que desea agregar la height y el weight del objeto pokemon.
Si desea que el nombre esté en mayúsculas, agregue una clase al elemento que contiene el nombre y use CSS para hacerlo en mayúsculas. Si solo quería escribir en mayúscula la primera letra, use .pokemonName { text-transform: capitalize; } en su lugar.
const { useEffect, useState } = React; function PokemonCard() { const [ pokemon, setPokemon ] = useState(); useEffect(() => { fetch('https://pokeapi.co/api/v2/pokemon/charizard') .then(res => res.json()) .then(setPokemon); }, []) if (!pokemon) return <div>Loading pokemon data</div>; return ( <div> {pokemon.types.map(({ id, type }) => { return ( <div key={id}> <h3 className="pokemonName"> {type.name} </h3> <p>Height: {pokemon.height}</p> <p>Weight: {pokemon.weight}</p> </div> ); })} </div> ); } ReactDOM.render( <PokemonCard />, document.getElementById('react') ); .pokemonName { text-transform: uppercase; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>