Estoy practicando ReactJS
y quiero renderizar una lista de superheroes
. En Javascript use un bucle for
para que renderice hasta 6 templates con personajes de la api
usando un Id
en la URL
, pero usando JSX
no sé como hacerlo porque no reconoce la variable heroe
en el return
. Probe otras alternativas y no encontre solución aún.
import axios, * as others from 'axios';
import React, {useState} from "react";
const Equipo = () => {
const [heroes, setHeroes] = useState("");
axios.get(`https://superheroapi.com/api.php/token/${id}`, {
"mode": "no-cors",
"Headers": {
"Access-Control-Allow-Origin":"*",
}
})
.then(response => {
setHeroes(response)
})
.catch(e => {
console.log(e)
})
return (
<div style={{ alignItems: "center", textAlign: "center"}}>
<h2 id="listaHeroes" style={{ fontSize:50}}>SuperHeroes</h2>
{ heroes.map( heroe =>
<article>
<h2>{heroe.name}</h2>
<p>{heroe.appearance.gender}</p>
<p>Inteligencia: {heroe.powerstats.intelligence}</p>
<p>Fuerza: {heroe.powerstats.strength}</p>
<p>Velocidad: {heroe.powerstats.speed}</p>
<img src={heroe.image.url} alt="heroe" width="200px"/>
</article>
) }
</div>
);
}
export default Equipo;