history.push changes url but does not render form react hooks

English is not my mother language so sorry for mistakes, i’m react beginner, my question: I am at route /#/billingInfo/ when user clicks ‘sender’ button payers name will be senders name and same for ‘receiver’ button, but the problem is i’m pushing same url which is this same page, i get senders or receivers name in my input as i should but only when i refresh the page, my question is how to not refresh the page and get those in my input (need to render/forceUpdate < Form > or that specific input when user clicks those buttons ??)

my code:

const [form] = Form.useForm();

  const query = window.location.toString().split("?")[1];

  const urlParamss = new URLSearchParams(query);

  const payer = new URLSearchParams(query).get("payer");
  const bNameUrl = urlParamss.get("bName");

  const PickUpName = urlParamss.get("pName");

  const DeliveryName = urlParamss.get("dName");

  let bName;

  if (payer === "sender") {
    bName = PickUpName;
  } else if (payer === "receiver") {
    bName = DeliveryName;
  }

  const senderPays = () => {
    history.push(`/billingInfo/${customerId}?${query}&payer=sender`);
  };

  const receiverPays = () => {
    history.push(`/billingInfo/${customerId}?${query}&payer=receiver`);
  };
  return (
    <div>
      <Form>
        <div>
          <Button onClick={senderPays}>sender</Button>
          <Button onClick={receiverPays}>receiver</Button>
        </div>
        <Form.Item
          label="payers name"
          name="bName"
          initialValue={bNameUrl || bName}
        >
          <Input type="string" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default BillingInfo;

Answer

If the payer query parameter is the only difference in urls when the new routes are pushed, then you can “listen” for changes on that value in an useEffect hook.

1. Create a custom query parameter hook. From the React-Router docs Query Parameters.

   const useQuery = () => {
     return new URLSearchParams(useLocation().search);
   };
   

2. Use this hook to get the query parameters.

   const {
     payer,
     bName: bNameUrl,
     dName: DeliveryName,
     pName: PickUpName
   } = useQuery();
   

3. Move bName into component state.

   const [name, setName] = useState(bNameUrl || bName);
   

4. Use useEffect to handle any changes to payer and update name state.

   useEffect(() => {
     setName(payer === 'sender' ? PickUpName : DeliveryName);
   }, [payer]);
   

5. Render name as the default input value (retains whatever form logic you may have). Use a react key on the form to help “re-initialize” it by indicating to react it’s a “new” component and needs to be mounted. See Fully uncontrolled component with a key.

   <Form key={name}>
     <div>
       <Button onClick={senderPays}>sender</Button>
       <Button onClick={receiverPays}>receiver</Button>
     </div>
     <Form.Item
       label="payers name"
       name="bName"
       initialValue={name}
     >
       <Input type="string" />
     </Form.Item>
   </Form>