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

Question

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 :)

you can make a map in pokemon.apiTypes

Alexsander Gutierreez
– Alexsander Gutierreez

2023-01-29 02:56:07 +00:00
Commented Jan 29, 2023 at 2:56 — Alexsander Gutierreez
– Alexsander Gutierreez, Commented Jan 29, 2023 at 2:56

Mario Perez · Accepted Answer · 2023-01-29 03:46:46Z

2

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;

answered Jan 29, 2023 at 3:46

Mario Perez

3,4571 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joel Jaison · Accepted Answer · 2023-01-29 02:57:32Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related