data is not inserted in the payload while making a POST request in reactjs

Question

I have a react component:

import { addPersonalInfo } from "@request/profile";
import { Button } from "@components/common/ui/Button";
import { toast } from "react-toastify";
import { ErrorMessage, Field, Formik, FormikHelpers } from "formik";
import * as yup from "yup";
// import { RadioSwitch } from "@components/common/RadioSwitch";

type FormValues = {
  present_address: {
    division: string;
    district: string;
    thana: string;
    house: string;
    // same_address: boolean;
  };
};

type IReqBody = {
  present_address: {
    division: string;
    district: string;
    thana: string;
    house: string;
    // same_address: boolean;
  };
};

const initialValues: FormValues = {
  present_address: {
    division: "",
    district: "",
    thana: "",
    house: "",
    // same_address: false;
  },
};

const CreateAddressSchema = yup.object({
  division: yup.string().required("Division is required"),
  district: yup.string().required("District is required"),
  thana: yup.string().required("Thana is required"),
  house: yup.string().required("House is required"),
});

export const CreateAddress = ({
  close,
}: {
  close: () => void;
}): JSX.Element => {
  const handleSubmit = async (
    values: FormValues,
    actions: FormikHelpers<FormValues>
  ) => {
    actions.setSubmitting(true);
    const {
      present_address: { division, district, thana, house },
    } = values;
    const reqbody: IReqBody = {
      present_address: {
        division: division,
        district: district,
        thana: thana,
        house: house,
        // same_address: boolean;
      },
    };

    try {
      const res = await addPersonalInfo(reqbody);
      if (res.status == 201) {
        toast.success("Your request is being processed");
        actions.setSubmitting(false);
        close();
      } else {
        actions.setSubmitting(false);
      }
    } catch (err) {
      toast.error("Failed to Edit Personal Information");
      actions.setSubmitting(false);
    }
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={CreateAddressSchema}
    >
      {(formikBag) => (
        <form onSubmit={formikBag.handleSubmit}>
          <div className="p-6">
            <div className="mt-6">
              <div>
                <h3 className="text-gray-600 mb-3 font-medium">Add Address</h3>
                <div className="mb-4">
                  <label className="space-y-2">
                    <p>Division *</p>
                    <Field
                      type="text"
                      className="form-input"
                      name="division"
                      placeholder="Dhaka"
                    />
                    <ErrorMessage
                      className="text-xs text-red-500"
                      component="p"
                      name="division"
                    />
                  </label>
                </div>

                <div className="mb-4">
                  <label className="space-y-2">
                    <p>District *</p>
                    <Field
                      type="text"
                      className="form-input"
                      name="district"
                      placeholder="Dhaka"
                    />
                    <ErrorMessage
                      className="text-xs text-red-500"
                      component="p"
                      name="district"
                    />
                  </label>
                </div>

                <div className="mb-4">
                  <label className="space-y-2">
                    <p>Thana *</p>
                    <Field
                      type="text"
                      className="form-input"
                      name="thana"
                      placeholder="Dhanmondi"
                    />
                    <ErrorMessage
                      className="text-xs text-red-500"
                      component="p"
                      name="thana"
                    />
                  </label>
                </div>

                <div className="mb-4">
                  <div>
                    <label className="space-y-2">
                      <p>House/Road/Village *</p>
                      <Field
                        name="house"
                        as="textarea"
                        className="form-textarea"
                        placeholder="Aa"
                      />
                      <ErrorMessage
                        className="text-xs text-red-500"
                        component="p"
                        name="house"
                      />
                    </label>
                  </div>
                </div>

                {/* <div className="mb-4">
                  <div className="flex justify-between">
                    <label className="space-y-2">
                      <p>Same as Permanent Address</p>
                    </label>
                    <RadioSwitch
                      isChecked={false}
                      // eslint-disable-next-line @typescript-eslint/no-empty-function
                      onChange={() => {}}
                    />
                  </div>
                </div> */}
              </div>
            </div>

            <div className="flex justify-end">
              <Button
                type="button"
                onClick={() => close()}
                size="sm"
                variant="text"
                style={{ marginRight: 12 }}
              >
                Cancel
              </Button>

              <Button
                type="submit"
                size="sm"
                variant="primary"
                isLoading={formikBag.isSubmitting}
                disabled={formikBag.isSubmitting}
                style={{ marginRight: 12 }}
              >
                {"Save & Next"}
              </Button>
            </div>
          </div>
        </form>
      )}
    </Formik>
  );
};

When I make the POST request the requested payload is:

{
    "present_address": {
        "division": "",
        "district": "",
        "thana": "",
        "house": ""
    }
}

although I am giving all the data in the form using the UI the data is not getting inserted while doing the request.What is the issue in the code block? What is the change I need to make to get the proper data in the payload like this:

{
        "present_address": {
            "division": "Dhaka",
            "district": "Dhaka",
            "thana": "Dhanmondi",
            "house": "ABC Tower"
        }
    }

Answer 1

In here you need to put your variable directly to the state:

const initialValues: FormValues = {
  present_address: {
    division: "",
    district: "",
    thana: "",
    house: "",
  },
}

TO:

const initialValues: FormValues = {
    division: "",
    district: "",
    thana: "",
    house: "",
  },

And here:

const {present_address: { division, district, thana, house }} = values;

Change to:

const { division, district, thana, house } = values;