Question

0

225

Views

How to fetch console date on webpage react axios

How to fetch api data on web page using axios in react js,

Expected :

Via GET api call i get some response in console , now i want to print that console data in the web page

import React, { Component } from 'react'
import axios from 'axios'
// import { data } from 'jquery'
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

NOTES :

data in the console like Array data (24)

["["/home/fraction/FastAPI/videos/video1.mp4", "/home/fraction/FastAPI/videos/video2.mp4", "/home/fraction/FastAPI/videos/video3.mp4", "/home/fraction/FastAPI/videos/video4.mp4", "/home/fraction/FastAPI/videos/video5.mp4"]

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-12T04:00:25.282Z

You need to store your api response in some state

take a state maybe name myVideoUrl
setState this with your response from api
then you need to import video player here so this component become parent and your video player component will be a child then pass this state myVideoUrl to your child component

import React, { Component } from 'react'
import axios from 'axios'
// import { data } from 'jquery'
class PostForm extends Component {
constructor(props) {
    super(props)

    this.state = {
        key: '',
        myVideoUrl: ''
    }
    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)
            this.setState({ myVideoUrl: response })
        })
        .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>
        //im assuming your child component here
            <MyVideoPlayer url={this.state.myVideoUrl} />
        </div></center>
    )
}}
export default PostForm

after this you can access this.props.url in your child component

0

225

How to fetch console date on webpage react axios

1 answers

0

Find remote jobs

Andres GPT