how to only change a specific query params in react

Question

Suppose I have this url: /app/search?spaceId=**621cd16015**&resource_type=room&capacity=3

and I want to update only the spaceId based on click, so the new URL will be: /app/search?spaceId=**14235ad**&resource_type=room&capacity=3

I'm using the class component. I used the following code to change the spaceId. It works, but it also removes all the other parameters too.

this.props.history.push({
      pathname: "/app/search",
      search: `?spaceId=${event}`,
    });

Did you try replace? Maybe with a regular expression? There's also the URL API. — Andy
– Andy, Commented Mar 5, 2022 at 5:16
@Andy i cant replace as the spaceId is dynamic. How can I get old spaceId everytime to replace. — Murari Kumar
– Murari Kumar, Commented Mar 5, 2022 at 5:20
You can switch to functional component and use useQueryParams hook. — Mohit Kushwaha
– Mohit Kushwaha, Commented Mar 5, 2022 at 6:33

yuval.bl · Accepted Answer · 2022-03-05 11:37:22Z

2

You can use URLSearchParams object

  const searchParams = new URLSearchParams('spaceId=spaceOldValue&resource_type=room&capacity=3');
  searchParams.set('spaceId', 'spaceNewValue');

  this.props.history.replace({
    pathname: '/app/search',
    search: searchParams.toString()
  });

answered Mar 5, 2022 at 11:37

yuval.bl

5,0843 gold badges23 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

how to only change a specific query params in react

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