Using React, I have created a component named ItemPoke. Then I use array.map to read my data from a small array of 4 objects. The structure is dasplay but not the images and the content of h3 and span labels. Using the dev tool from Chrome I can see the props value, the strigs are correctly asignated, but the image and info are not displayed. My code:

const pokemons = [
    {
      name: "bulbasaur",
      url: "https://pokeapi.co/api/v2/pokemon/1/",
      sprite:
        "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
      type: "water"
    },
    {
      name: "ivysaur",
      url: "https://pokeapi.co/api/v2/pokemon/2/",
      sprite:
        "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png",
      type: "water"
    },
    {
      name: "venusaur",
      url: "https://pokeapi.co/api/v2/pokemon/3/",
      sprite:
        "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png",
      type: "water"
    },
    {
      name: "Charmander",
      url: "https://pokeapi.co/api/v2/pokemon/3/",
      sprite:
        "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png",
      type: "fire"
    }
  ];
  
  export default pokemons;


import '../App.css';

function ItemPoke({NamePoke,TypePoke,ImagePoke}) {
  return (
    <article className='list-pokemons-item'>
      <div className='list-pokemons-item-content'>
        <img 
        src={ImagePoke} 
        alt="pokemon-1"
        ></img>
        <h3>{NamePoke}
          <span>{TypePoke}</span>
        </h3>
      </div>
    </article>
  );
}

export default ItemPoke;

import '../App.css';
import ItemPoke from '../components/ItemPoke';
import pokemons from '../components/data';

export default function ListPoke() {

  const ListaPokemons = pokemons.map ((item, index) => {
    return(
      <ItemPoke key = {index} name= {item.name} type = {item.type} image = {item.sprite} />
    ) 
  }
  )

  return (
    <main className="list-pokemons">
    {ListaPokemons}
    </main>
  );

}

CodePudding user response：

You need to match the prop names you passing to your component:

function ItemPoke({ name, type, image }) {
  return (
    <article className="list-pokemons-item">
      <div className="list-pokemons-item-content">
        <img src={image} alt="pokemon-1"></img>
        <h3>
          {name}
          <span>{type}</span>
        </h3>
      </div>
    </article>
  );
}