Pokedex

Pokecard.js

import React, { Component } from "react";
import "./Pokecard.css";

/*important variables */

//const POKE_API = 'https://assets.pokemon.com/assets/cms2/img/pokedex/detail/';
//let padToThree = (number) => (number <= 999 ? `00${number}`.slice(-3): number);
//let imgSrc = `${POKE_API}${padToThree(props.id)}.png`;

/*end of important variables */

function Pokecard(props) {
    const POKE_API = 'https://assets.pokemon.com/assets/cms2/img/pokedex/detail/';

    let padToThree = (number) => (number <= 999 ? `00${number}`.slice(-3): number);
    let imgSrc = `${POKE_API}${padToThree(props.id)}.png`;
    {console.log(imgSrc)}
    return (
        <div class="pokecard" key={props.id}>
            <h2>{props.name}</h2>
            <img src={imgSrc} alt={`A picture of the ${props.type} pokemon, ${props.name}`}/>
            <p>Type: {props.type}</p>
            <p>EXP: {props.base_experience}</p>
        </div>
    )
}

export default Pokecard;

Pokedex.js

import React, { Component } from 'react';
import Pokecard from './Pokecard';

function Pokedex() {
    const pokemon = [
        {id: 4, name: 'Charmander', type: 'fire', base_experience: 62},
        {id: 7, name: 'Squirtle', type: 'water', base_experience: 63},
        {id: 11, name: 'Metapod', type: 'bug', base_experience: 72},
        {id: 12, name: 'Butterfree', type: 'flying', base_experience: 178},
        {id: 25, name: 'Pikachu', type: 'electric', base_experience: 112},
        {id: 39, name: 'Jigglypuff', type: 'normal', base_experience: 95},
        {id: 94, name: 'Gengar', type: 'poison', base_experience: 225},
        {id: 133, name: 'Eevee', type: 'normal', base_experience: 65}
      ]
      const PokecardItems = pokemon.map((pokemon) =>
        <Pokecard 
            key={`pokemon${pokemon.id}`} 
            name={pokemon.name}
            type={pokemon.type}
            base_experience={pokemon.base_experience}
            pokemonImg={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}    
            //hiPokemonImg = {`https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${pokemon.id.padStart(3, '0')}.png`}
        />  
      );   
    return (
        <div className="Pokedex">
            {PokecardItems}
        </div>
    );
}

export default Pokedex;