Update query strings onChange - reactjs

Question

I have a url with query strings which looks like this

http://localhost:3000/collection?page=1&limit=15&filter=%27%27&filterInitDate=2019/11/11&filterEndDate=2019/11/11

I want to update just the filterInitDate when i select a date from my date input. I know i can update the url simply by using this.props.history.push but how can i just change/update the filterInitDate when i change the date input

ideally something like this

history.push(`/collection?filterInitDate=${startDate}`)

Titus · Accepted Answer · 2019-11-11 12:04:10Z

1

You can use the URL and URLSearchParams classes for that, here is an example:

const urlStr = 'http://localhost:3000/collection?page=1&limit=15&filter=%27%27&filterInitDate=2019/11/11&filterEndDate=2019/11/11';
const url = new URL(urlStr);
url.searchParams.set("filterInitDate", "2019/11/12");

console.log(url.toString());

And an example specific to react router will look like this:

const query = new URLSearchParams(history.location.search);
query.set("filterInitDate", startDate);
history.replace({
  search: query.toString()
});

edited Nov 11, 2019 at 12:04

answered Nov 11, 2019 at 11:54

Titus

22.6k1 gold badge26 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Update query strings onChange - reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related