I am developing a GET type response from an API, the response I get is the one in the image
The request code is as follows:
const cardInfo = axios.get('http://localhost:8000/api/Equipos/?format=json')
.then((response) => {
const cartas = [];
for (let index = 0; index < 20; index++) {
const respuesta = response.data[index];
var titulo = respuesta.Equipo;
var valor = respuesta.ValorMedio;
const cardInfo =
{
image: "https://cdn5.dibujos.net/dibujos/pintados/201746/escudo-del-club-atletico-de-madrid-deportes-escudos-de-futbol-11197949.jpg",
title:titulo,
text: valor
}
cartas.push(cardInfo)
}
return cartas;
});
I have the problem when mapping each card because I only need the results of the promise:
return(
<section class="row mt-5 ml-5">
<div class="col-3">
{cardInfo.then(cardInfo => cardInfo.map(renderCard))}
</div>
<div class="col-3">
{cardInfo.then(cardInfo => cardInfo.map(renderCard))}
</div>
<div class="col-3">
{cardInfo.then(cardInfo => cardInfo.map(renderCard))}
</div>
<div class="col-3">
{cardInfo.then(cardInfo => cardInfo.map(renderCard))}
</div>
</section>
);
I understand that when making the request the process is asynchronous but how can it be done to get the data out of the promise
To render the cards, you have to use async and await in each request to deal with asynchronous requests, to render the cards with react you must take into account the lifecycles. Once the data is obtained, the render function automatically renders it and the HTML structure is returned.