I created a simple date picker user interface in react js, picking a date from the drop-down, my fast API connected with Redis, now how to store data in a variable and use that variable in URL to GET data from API

    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()
            console.log(this.state)
            axios
                .get('http://127.0.0.1:8000/hvals_hash?key=30/8/21')
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                    console.log(error)
                })
        }
    
        render() {
            const { key } = this.state
            return (
                <div>
                    <form onSubmit={this.submitHandler}>
                        <div>
                            <input
                                type="text"
                                name="key"
                                value={key}
                                onChange={this.changeHandler}
                            />
                        </div>
    
                        <button type="submit">Submit</button>
                    </form>
                </div>
            )
        }
    }
    
    
    
    export default PostForm

In that URL I want to pass as a parameter to get particular data or selected data by the user. How to do that?

CodePudding user response：

You define and store the key in your component's store, so just edit the URL address and place the key on it.

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