Re-render React Component when query string changes

Question

I am very new to React so apologies if this is just a duplicate - I have tried to look at solution to other questions but none have helped me.

I want a React component to re-render when the query string of the page changes. I have a basic contact form and I'm pre-populating a single field with a value passed via the query string. My understanding is that React should re-render a component whenever it's state or components change and seeing as the query string is part of the props (this.) then I thought it would be easy, but this does not seem to be the case for me.

Route

<Route exact path="/contact-us" component={ContactUs} />

Component

import React, { PureComponent, Fragment } from 'react';
import bannerImage from './../../assets/images/contact-banner.jpg';
import QueryString from 'query-string';

class ContactUs extends PureComponent {
  render() {
    return (
      <Fragment>
        <CommonBanner banner={bannerImage} title="Contact us" />
        <ContactUsForm tripName={QueryString.parse(this.props.location.search).tripName)} />
      </Fragment>
    );
  }
}

export default ContactUs;

I want the contact form to re-render when: The user has clicked through from a location which send the trip name through via the query string and then clicks the 'Contact Us' button in the header of the page which links to the Contact Us page again, but without the trip name in the query string. This should then remove the pre-population of the trip name field.

UPDATE

I've noticed that if I manually removed the query string from the URL in the browser then the field is blanked out as expected. It's only when I click a link in the menu that just links to 'contact-us' that nothing seems to happen.

This question will help you out stackoverflow.com/questions/48993247/… — Shubham Khatri
– Shubham Khatri, Commented Jun 27, 2018 at 10:30
Yeah, I saw your answer there before. I'd rather not mess with the router and just have a solution for this one component if possible. — Andy Furniss
– Andy Furniss, Commented Jun 27, 2018 at 10:40
Well, we aren't messing with the router, you can choose to use your custom withRouter or the default one based on your requirement and also, this is a generic enough solution that you can use throughout your app — Shubham Khatri
– Shubham Khatri, Commented Jun 27, 2018 at 10:41
But how come the component doesn't re-render even though the props are changing? — Andy Furniss
– Andy Furniss, Commented Jun 27, 2018 at 11:12

Andy Furniss · Accepted Answer · 2018-06-27 12:22:21Z

0

Figured it out. This was not causd by the ContactUs component after all. It was caused by the sub-component ContactUsForm which is using Formik and setting the initial values like so:

<Formik
  initialValues={{
  firstName: '',
  surName: '',
  email: '',
  message: '',
  tripName: this.props.tripName || '',
}}
...
>

You need to allow Formik to reinitialize the form if initial values changes using enableReinitialize - https://github.com/jaredpalmer/formik#enablereinitialize-boolean

<Formik
  initialValues={{
  firstName: '',
  surName: '',
  email: '',
  message: '',
  tripName: this.props.tripName || '',
}}
enableReinitialize={true}
...
>

answered Jun 27, 2018 at 12:22

Andy Furniss

3,9247 gold badges38 silver badges62 bronze badges

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

Comments

vsync · Accepted Answer · 2018-08-30 20:24:33Z

-1

componentDidUpdate(prevProps, prevState) {
  if (prevProps.match.params.'queryVariable' !== this.props.match.params.'queryVariable') {
  //either 
    this.forceUpdate()
 //or
    this.setState({
      something:something
    })
  }
}

put your query param variable example prevProps.match.params.id and this.props.match.params.id

edited Aug 30, 2018 at 20:24

vsync

133k61 gold badges345 silver badges430 bronze badges

answered Jun 27, 2018 at 11:52

jadlmir

5051 gold badge7 silver badges16 bronze badges

2 Comments

Andy Furniss Over a year ago

This doesn't seem to work either. It calls forceUpdate but nothing happens still.

Santiago Mendoza Ramirez Over a year ago

Query params is different to url params. Query params are the one after ?, like ?param1=value1.

Collectives™ on Stack Overflow

Re-render React Component when query string changes

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related