How to dynamically update query parameters to URL string in react and axios
Question
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?
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;
2 answers
solution1
0 2021-10-04 14:37:26
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>
);
}
}
solution2
0 2021-10-04 15:00:40
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}`;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.