React When i am trying to get into a nested object the fetch throws me an undefined error-CodePudding

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;

this is the link for the api

https://pokeapi.co/api/v2/pokemon/charizard

when i try to get into the pokemon.types.type.name i get a error saying Uncaught TypeError: Cannot read properties of undefined (reading 'map') at PokemonCard (PokemonCard.js:16:1) at renderWithHooks (react-dom.development.j

CodePudding user response：

That is due to pokemonType is undefined initially. Try using optional chaining operator:

pokemonType?.map((x) => console.log(x.type.name));

Answer for what you tried in the comment:

const pokemonType = pokemon.types?.[0]?.type.name;

If you wanted to get the types rendered then use this:

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>

CodePudding user response：

map over the types property in the JSX. Note that the objects in the types array doesn't hold height or weight properties so I'm assuming you wanted to add the height and weight from the pokemon object.

If you want to make the name uppercase add a class to the element that holds the name, and use CSS to make it uppercase. If you meant only to capitalise the first letter use .pokemonName { text-transform: capitalize; } instead.

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>