pass paramters to URL in react with axios-CodePudding

Below mentioned link for the date range picker react code , it have 2 paramaters one is data picker another one is date range picker , now i want to include those two parameter in same URL to GET data from API

React date-range picker code

import React, { Component } from "react";
import axios from "axios";
import App from "./Date_range";



class PostList extends Component {
    url = "http://127.0.0.1:8000/create_keyValue?key=";

    constructor(props) {
        super(props);
        this.state = {
            posts: [],
            date: ""
        };
    }

    componentDidUpdate() {
        axios.get(this.url   this.state.date).then((response) => {
            this.setState({
                posts: response.data
            });
            console.log(response.data);
        });
    }

    render() {
        const { posts } = this.state;
        return (
            <div>
                <App />
                    onChange={(e) =>
                        this.setState({ ...this.state, data: e.target.value })
                    }
                
                {posts.length &&
                    posts.map((post) => <div key={post.id}>{post.id} </div>)}
            </div>
        );
    }
}

export default PostList;

How to call API in this method

CodePudding user response：

if I am not wrong you are learning React. let me tell you that

first you have to set the datePicker and Range value in "State". then you have to get "datePicker" and Range value from the state and add in the URL

eg:

let {datePicker , range} =  this.state
    let URL =  `http://127.0.0.1:8000/create_keyValue?date=${datePicker}?rang=${rang}`;

CodePudding user response：

If you want your users to be able to select dates and have your list of posts update to reflect the chosen date, then you'll want to use componentDidUpdate, and store your date picker variable in local state.

If the MaterialUIDateRange component's onChange event handler returns an array of two values (start and end date), as per these docs, then you could do something like the following:

class PostList extends Component {
    url = "http://127.0.0.1:8000/create_keyValue?";

    constructor(props) {
        super(props);
        this.state = {
            posts: [],
            date: "",
            range: [null, null]
        };
    }

    onNewDateSelected(value) {
        this.setState({ ...this.state, date: value });
    }

    onNewRangeSelected(value) {
        this.setState({ ...this.state, range: value });
    }

    componentDidUpdate() {
        // You can use string interpolation here to assemble your new query
        // using any string you have saved in state.
        axios
            .get(
                `${this.url}date=${this.state.date}&rangeStart=${this.date.range[0]}&rangeEnd=${this.date.range[1]}`
            )
            .then((response) => {
                this.setState({
                    posts: response.data
                });
                console.log(response.data);
            });
    }

    render() {
        const { posts, date, range } = this.state;
        return (
            <div>
                <App />
                <Body />
                <DatePicker onChange={onNewDateSelected} value={date} />
                <MaterialUIRangePicker onChange={onNewRangeSelected} value={range} />
                {posts.length &&
                    posts.map((post) => <div key={post.id}>{post.id} </div>)}
            </div>
        );
    }
}