getting information from url

Admin 1
Viewed 80

React beginner here, English is not my mother language so sorry for mistakes. I have url from there I want to get information I will show how I have done other pages(using antd form), but now I'm in different page where at the end of my url is payer=sender, so if payer is "sender" then do this. that 'payer=sender' at the end of my url comes by clicking a sender button, then when it is clicked form input should fill accordingly

const senderPays = () => {
    history.push(`/bilInfo/${custId}?${query}&payer=sender`);
  };
          <Button onClick={senderPays}>Sender</Button>

In previous pages I could get pickUpName from url like this :

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

const urlParams = new URLSearchParams(query);

const PickUpName = urlParams.get("pickUpName") || props.customer?.name;
  
<Form.Item
  label="pickUpName"
  name="pickUpName"
  initialValue={PickUpName || ""}
>
  <Input type="string" />
</Form.Item>

This is my url: https://localhost:5001/#/billingInfo/5dc9d690-a549-4baf-868e-a441c6c4ff47?pickUpName=gholam&pickUpContactPerson=&pickUpPhone=8744444&pickUpAddress=gerbytnie&pickUpPostalCode=65230&pickUpPostalRegion=helsnki&deliveryName=shammms&deliveryContactPerson=kalle&deliveryPhone=2658265&deliveryAddress=&deliveryPostalCode=65230&deliveryPostalRegion=&payer=sender

As you can see end of url is &payer=sender so if payer is sender then have these information and if payer is receiver then have these information:

this is my code:

useEffect(() => {
if (payer === "sender") {
  billingName = PickUpName;
} else if (payer === "receiver") {
  billingName = DeliveryName;
}

}, [payer]);

Component

<Form.Item
  label="billingName"
  name="billingName"
  initialValue={billingName || ""}
>
  <Input type="string" />
</Form.Item>

So I need somehow to get that billingName in my forms initialValue, depending who is payer.

antd reactjs html javascript
1 Answers

Use the useForm react hook to manually initialize fields:

Summary:

  1. Initialize a form instance using useForm().
  2. Pass that FormInstance to your Form
  3. Use useEffect hook to dynamically set the value of the Form.Item based on the value of payer
import { Form } from 'antd';


const Demo = () => {
  // Note that `useForm` is a React Hook and will only works in functional components
  const [form] = Form.useForm();

  const payer = new URLSearchParams(window.location.search).get('payer');

  // Manually initialize billingName based on `payer` value 
  useEffect(() => {

    if (payer === "sender") {
      form.setFieldsValue({ billingName: request.pickUpName });
    } else if (payer === "receiver") {
      form.setFieldsValue({ billingName: request.deliveryName });
    }

  }, [payer])

  // Pass the FormInstance `form` to your Form
  return (
      <Form form={form}>
        <Form.Item
          label="billingName"
          name="billingName"
        >
          ...   
       </Form.Item>

      ...
  )

Here's some documentation to help you out:

user_45256000
Related