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"
        }
    }

Ryan Le · Accepted Answer · 2021-08-16 07:01:15Z

2

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;

answered Aug 16, 2021 at 7:01

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

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

1 Comment

ashfaqrafi Over a year ago

also need to change this

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

to this

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

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related