problem to get an element from an array on React js , javascript API-CodePudding

i'm learning javascript and React JS but i got a problem when i want to fetch some information on the Pokemon API ^^ I can fetch some information but i want to get the second types of Pokemon, as you can see, it's working for the first type but not the second.

I think the problem is that not all the pokemon got 2 types ("apiTypes"), but i don't know how to render the second one. Thanks for your helping and sorry for my english ;)

The JSON : https://pokebuildapi.fr/api/v1/pokemon

/ https://pokebuildapi.fr/api/v1/pokemon

[
  {
    "id": 1,
    "pokedexId": 1,
    "name": "Bulbizarre",
    "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png",
    "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
    "slug": "Bulbizarre",
    "stats": {
      "HP": 45,
      "attack": 49,
      "defense": 49,
      "special_attack": 65,
      "special_defense": 65,
      "speed": 45
    },
    "apiTypes": [
      {
        "name": "Poison",
        "image": "https://static.wikia.nocookie.net/pokemongo/images/0/05/Poison.png"
      },
      {
        "name": "Plante",
        "image": "https://static.wikia.nocookie.net/pokemongo/images/c/c5/Grass.png"
      }
    ],

import React from 'react';

const Card = ({pokemon}) => {
  

    return (
       <li className='card'>
        <img src={pokemon.image} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        
        <div className='infos'>
        <img src={pokemon.apiTypes[0].image}/>
        <img src={pokemon.apiTypes[1].image}/>
        
        
        </div>
       </li> 
    );
};

export default Card;

I know i have to ask if there is an image on [1], but i don't know how... thanks a lot :)

CodePudding user response：

you've mentioned, not all pokemon have two types, so trying to access the second type using pokemon.apiTypes[1] would result in an error for those pokemon that only have one type.

One way to fix this issue would be to only render the second type image if it exists. You can do this by checking the length of the apiTypes array, and only rendering the second type image if the length is greater than 1.

import React from 'react';

const Card = ({pokemon}) => {
    return (
       <li className='card'>
        <img src={pokemon.image} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        
        <div className='infos'>
        <img src={pokemon.apiTypes[0].image}/>
        
        {pokemon.apiTypes.length > 1 && <img src={pokemon.apiTypes[1].image}/>}
        
        </div>
       </li> 
    );
};

export default Card;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

One way to solve this is to iterate over all apiTypes using the map method, like this:

import React from 'react';

const Card = ({pokemon}) => {
  

    return (
       <li className='card'>
        <img src={pokemon.image} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        <div className='infos'>
        {
          pokemon.apiTypes.map( apiType => <img src={apiType.image}/>
        }
        </div>
       </li> 
    );
};

export default Card;