post api request with json input fields in reactjs

Question

i have form with three input fields with type as

i have design the form but how to send data as object in gcloud field? code for gcloud input field:

<label>gcloud keyfile json</label>
  <TextareaAutosize
    name="gcloud_keyfile"
    type="text"
    id="gcloud_keyfile"
    value={values.gcloud_keyfile}
    onChange={handleChange}
  />

  

while for form submission i have used formik and code is shown below:

const initialValues = {
    organ: "",
    env: "",
    gcloud_keyfile: "" ,
  };

  const { values, errors, touched, handleBlur, handleChange, handleSubmit } =
    useFormik({
      initialValues,
      validationSchema: GcpSchema,
      onSubmit: async (values, action) => {
        try {
          let response = await axios.post(
            `${state.baseUrl}accounts/gcp/`,
            {
              organization: values.organ,
              environment: values.env,
              gcloud_keyfile_json: JSON.stringify(values.gcloud_keyfile),
            });
          if (response.status === 200) {
            setMsg("You Are Successfully Create the Account");
            action.resetForm();
            return Promise.resolve();
          }
        } catch (error) {
          console.error("There was an error!", error);
        }
      },
    });

i have used json stringify but that doesn't work

Answer 1

i used JSON.parse(gcloud_keyfile_json) to convert string into object and apply validation on the input field to take only object value