0

I'm trying to update an URL based on value of a dropdown. Through what function can I update the URL.

 handleChange = (e) => {
      // update client code
      this.setState({ clientcode: e.target.value.substr(0, 5),
        value: e.target.value,
      });
      // now update url
      // this.props.history.push('/v4/adminv2/web.php/client-onboard/family-management/api/packet?clientcode=' + this.state.clientcode);
      const state = "";
      const title = "";
      const url = '/v4/adminv2/web.php/client-onboard/family-management/api/packet?clientcode=' + this.state.clientcode;
      window.history.pushState(state, title, url);
    }

For every change in dropdown, the this.state.clientcode in the URL needs to be updated and reload the page.

Couldn't see any change in the url after change in dropdown value.

1
  • Are these routes being handled by React Router or are you expecting a new http request?
    – Mark
    Oct 21, 2019 at 20:40

4 Answers 4

2

you can use the history object passed from the router:

handleChange = (e) => {
  this.setState({ 
    clientcode: e.target.value.substr(0, 5),
    value: e.target.value,
  });
  const url = `/v4/adminv2/web.php/client-onboard/family-management/api/packet?clientcode=${this.state.clientcode}`
  props.history.push(url);
}

and this will not reload the page

1

Check the documentation for pushState. It takes three arguments

history.pushState(state, title, url);

Maybe try

window.history.pushState(undefined, undefined, `your/url/${e.target.value}`)

Although I disagree with the usage of pushState here. Why just not use this.props.history.push(`your/url/${e.target.value}`)?

EDIT - New answer added to reflect changed question

1

You said you want to reload the page, so I think that using window.history.pushState won't fit for your use case. Also looks like you're using a query string on the URL ?clientcode=${this.state.clientcode}. I guess the best solution for doing exactly what you want (change the URL and reload) is to use window.location.href, it would look something like this:

window.location.href += `?${this.state.clientcode}`;

For a simple case where you are just changing the current URL with the new query parameters this would work perfectly. However if you need to go to a completely different URL you will end up using:

window.location.href += `${window.location.host}/your-url-path-here?${this.state.clientcode}`;
1

Going with my gut, I believe the reason you aren't seeing the state update immediately is because you are using this.state and this.setState imperatively. React is declarative. The state won't be available until the next render cycle.

You might have better luck directly using e.target.value

const url = '/v4/adminv2/web.php/client-onboard/family-management/api/packet?clientcode=' + e.target.value.substr(0, 5)

Overall, you could simplify your code:

handleChange = (e) => {
  const clientcode = e.target.value.substr(0, 5);
  const value = e.target.value;
  // update client code
  this.setState({ clientcode, value });
  const url = `/v4/adminv2/web.php/client-onboard/family-management/api/packet?clientcode=${clientcode}`;
  window.history.pushState('', '', url);
}
2
  • 1
    Just a note, this.setState returns a Promise, so you can either put your code in a .then or await for the state update to finish. You don't necessarily need to wait the next render cycle to finish before you get the updated state. Oct 22, 2019 at 14:02
  • @WendelNascimento thanks for that, this info will change my life! (Although, I prefer you use functional components + useState) Oct 23, 2019 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.