0

Below I mention a link for a React date range picker. It takes 2 parameters: one is date picker another one is date range picker. I want to include those two parameters in same URL to send a GET request to an API endpoint.

The final API endpoint URL should look like this:

http://127.0.0.1:8000/create_keyValue?key=<date_picker_value>&value=<date_range_value>

How can I update this API endpoint using the two date values selected by the user in this React component?

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;
Improve this question
5
  • what kind of data do you want to be included in your API URL? Commented Oct 4, 2021 at 14:33
  • Could you please rephrase your question? It is not clear what you are asking for. Try to use some punctuation marks! .,? Commented Oct 4, 2021 at 14:34
  • here there are 2 parameters one is a date picker another one is date range now I expect two results one is for date picker that included in to URL and same for Range picker but this time i want to pass those two-parameter in one URL Commented Oct 4, 2021 at 14:35
  • as a suggestion, you can edit your post by adding the above explanation to clarify the issue. Commented Oct 4, 2021 at 15:12
  • @novonimo stackoverflow.com/questions/69310222/… could you please help me to clear this issue Commented Oct 7, 2021 at 4:16

2 Answers 2

Reset to default
0

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}`;

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>
        );
    }
}
Improve this answer

4 Comments

I need your idea or suggestion to get data from api for between dates, how can I do that?
I made an edit, see above. This is assuming that the MaterialUIDateRange component's event handler receives the event value in the form of an array with the start date and end date in it. I'm not sure what your API endpoints look like, but if you have control over them, then you can extract the start and end date query params at your APIs, and just provide them like the above in your client.
sorry I made some mistake... actually I forgot to command that material ... material UI is not included , can you please go through one more time
I added a single date and date range option, and changed the docs reference to the antd API docs. Your date range array will not be interpreted properly by the URL parser, so you have to expand it into all its parts in the URL.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.