Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

128
Vistas
Fetch API Console data on webpage using axios

I created a simple date picker react js, after that I call API and get some data from API in the console, now I want to fetch API data on the web page.

Here is the code i used to call API function, I want map response data on a web page

import React, { Component } from 'react'
import axios from 'axios'

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',

            
        }
        console.log(this.state)
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        
        axios
        .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
        .then(response => {
            console.log(response.data)
        })
        .catch(error => {
            console.log(error)
        })
    }

    render() {
        const { key } = this.state
        
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> DATE PICKER</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                        
                    </div>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
        
            </div></center>
        )
    }
}
export default PostForm
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

First you have to save the data somewhere inside the app. Create a state and use setState to update it. Now that you have the latest data, you can use JSX's magic to display them using map. Example:

<div>
  {this.state.data.map((dataObjectToDisplay) => {
    return (
      <div>
        {/* Include your data in a way you want here, you can also replace the div with any other element (li) */}
      </div>
    );
  })}
</div>
about 4 years ago · Juan Pablo Isaza Denunciar

0

<div>
  {this.state.data.map((dataObjectToDisplay) => {
    return (
      <div>
        {/* Include your data in a way you want here, you can also replace the div with any other element (li) */}
      </div>
    );
  })}
</div>
about 4 years ago · Juan Pablo Isaza Denunciar

0

Here is the explanation for this issue you can refer here,

import React, { Component } from 'react'
import axios from 'axios'

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',
            // Where data will be saved.
            data: [],
        }
        console.log(this.state)
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        
        axios
        .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
        .then(response => {
                        // Updating the state to trigger a re-render       
            this.setState({data: response.data});
            console.log(response.data)
        })
        .catch(error => {
            console.log(error)
        })
    }

    render() {
        const { key } = this.state
        
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> DATE PICKER</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                        
                    </div>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
            <div>
{this.state.data.map((dataObjectToDisplay) => {
    return (
    <div>
        {
            <ol>{this.state.data}</ol>
        }
    </div>
    );
})}
</div>
    
            </div></center>
        )
    }
}
export default PostForm

add a state (add an object property to this.state) and inside the submit handler, after getting the response in Axios, use setState({[name of state]: response.data }).

That takes care of updating the state. As for where to display them, it is up to you.

You can copy the code anywhere inside the render method. If u want to display it under the form, paste it inside the div container after the form.

For better controlling of the state, you can check one of the state-management tools like redux or simply use global context and implement routing using react-router –

Credits to @MrCeRaYA

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda