Estou desenvolvendo um projeto de um pokedex onde estou pegando os pokemons do PokeAPI... E o problema/duvida que estou tendo é: É possivel armazenar os "resultados" quando se utiliza o map? Pra ser mais especifico, estou utilizando o map para percorrer todos os pokemons da api e adquirir o tipo de cada pokemon. A medida que percorro, ele esta retornando o tipo do pokemon devidamente na tela, mas o que eu quero fazer é armazenar o tipo de cada pokemon para fazer uma estilização condicional de acordo com o tipo do pokemon.
import React from "react";
import "./pokemon.css";
const Pokemon = (props) => {
const { pokemon } = props;
const onHeartClick = () => {
console.log("pode favoritar");
};
const heart = "❤";
return (
<div>
<div className="pokemon-card">
<div className="pokemon-image-container">
<img alt={pokemon.name} src={pokemon.sprites.front_default} />
</div>
<div className="card-body">
<div className="card-top">
<h3>{pokemon.name}</h3>
<div>{pokemon.id}</div>
</div>
<div className="card-botton">
<div className="pokemon-type">
{pokemon.types.map((type, index) => {
return (
<div key={index} className="pokemon-type-text">
{type.type.name}
</div>
);
})}
</div>
<button className="pokemon-heart-btn" onClick={onHeartClick}>
{heart}
</button>
</div>
</div>
</div>
</div>
);
};
export default Pokemon;