How to solve axios promise

Question

I am developing a GET request from an API , the response I get is the one in the image, the data I see in the promise is correct . What I want to do exactly is to render the letters and their promise data in the HTML structure but I still have the problem that being an asynchronous request it is returned as a promise and I need to return the promise data inside the HTML structure .

[https://prnt.sc/11e8fmb][1]

import React from 'react';
import {Card} from 'react-bootstrap';
import axios from 'axios';
const Home = (index) =>{

    const renderCard = (card) => {
        return(
            <React.Fragment>
                <Card style={{width: "18rem"}}>
                    <Card.Img width="100" height="250" variant="top" src="holder.js/100px180" src={card.image}/>
                </Card>
                <Card.Body>
                    <Card.Title>{card.title}</Card.Title>
                    <Card.Text>{card.text}</Card.Text>
                </Card.Body>
            </React.Fragment>            
        );
    }

    const response = 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(renderCard(cardInfo));
            }
            return cartas;

        }); 
        const cartas = Promise.resolve(response);        
        console.log(cartas);
        return(
            <div class="row mt-5 ml-5">
                <div class="col-3">
                     //Here i want to render the card data
                </div>
                <div class="col-3">
                     //Here i want to render the card data
                </div>
                <div class="col-3">
                     //Here i want to render the card data
                </div>
                <div class="col-3">
                    //Here i want to render the card data
                </div>
            </div>
        );
}

export default Home;


  [1]: https://prnt.sc/11e8fmb

Answer 1

To render the cards, you have to use async and await on each request to deal with asynchronous requests , to render the cards with react you have to take into account the lifecycles . Once you have the data, the render function automatically renders the data and returns the HTML structure.

import React from 'react';
import axios from 'axios';

// Estructura de los datos en React
export default class FetchEquipo extends React.Component {
    state = {
        loading: true,
        equipo: null,
        jugadores: null,
        edadMedia: null,
        valorTotal: null,
        valorMedio: null
    };

    // Inicio de la petición asincrona a la API
    async componentDidMount() {
        const url = "http://localhost:8000/api/Equipos/?format=json";
        // Await de la función para esperar a la respuesta asincrona y obtener los datos
        const response = await axios.get(url);
        const data = await response.data;
        // Cambio del estado de los datos porque llegado aquí ya se han recibido
        for (let index = 0; index < data.length; index++) {
            this.setState({ equipo: data[index], loading: false });
        }

    }

    render() {
        if (this.state.loading == true) {
            return (
                <div>
                    <p>Loading...</p>
                </div>
            );
        }
        else if (this.state.equipo == null) {
            return (
                <div>
                    <p>No se encontraron datos de los equipos</p>
                </div>
            );
        }
        else{
            return (
                <div>

                    <h1>{this.state.equipo.Equipo}</h1>
                    <h2>Jugadores: {this.state.equipo.Jugadores}</h2>
                    <h2>Edad media: {this.state.equipo.EdadMedia}</h2>
                    <h2>Valor total: {this.state.equipo.ValorTotal}</h2>
                    <h2>Valor Medio: {this.state.equipo.ValorMedio}</h2>

                </div>
            );
        }

    }
}