remove hidden field from final json after submit using Formik-CodePudding

I build a simple form using formik. I have a situation that one field is hidden after I choose in radio buttun 'no'. But if I enter value to this field and then choose 'no' to hide it, and submit the form I will get in the final json also the value of the hidden field. My expectation is when field isn't show to the screen, remove it from the final json.

My form:

import React from "react";
import { Formik } from "formik";
import { Form } from "react-bootstrap";

import { Radio } from "antd";

const CustomFormik = () => {
  return (
    <>
      <Formik
        initialValues={{
          input1: null,
          radio: null,
          input2: null
        }}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {(formik) => (
          <>
            <Form
              onSubmit={formik.handleSubmit}
              className="custom-formik-container"
            >
              <Form.Group>
                <span>input1: </span>
                <Form.Control
                  id={"input1"}
                  name={"input1"}
                  {...formik.getFieldProps("input1")}
                />
              </Form.Group>

              {formik.getFieldProps("radio").value !== 2 && (
                <Form.Group>
                  <span>input2: </span>
                  <Form.Control
                    id={"input2"}
                    name={"input2"}
                    {...formik.getFieldProps("input2")}
                  />
                </Form.Group>
              )}

              <Form.Group>
                <span>radio: </span>
                <Radio.Group {...formik.getFieldProps("radio")}>
                  <Radio value={1}>yes</Radio>
                  <Radio value={2}>no</Radio>
                </Radio.Group>
              </Form.Group>
            </Form>

            <button
              style={{
                width: 200,
                height: 30,
                background: "#113776",
                color: "#fff"
              }}
              onClick={() => formik.handleSubmit()}
            >
              S U B M I T
            </button>
          </>
        )}
      </Formik>
    </>
  );
};
export default CustomFormik;

For example enter: 'abc' to the first input. 'efg' to the second input. 'no' to the radio button.

The final json in console.log will be: {input1: "abc",input2: "efg", radio: 2}

But my expectation in to be: {input1: "abc", radio: 2}

codesandbox: https://codesandbox.io/s/agitated-euclid-9gl6ky?file=/src/App.js

Thank you guys!

CodePudding user response：

I don't know if this fits your needs but I had a similar case in my project using redux-form and what i did was to delete the property before submiting it

sth like this

    onSubmit={(values) => {
      if (values.radio === 2) {
        let clonedValues = { ...values };
        delete clonedValues.input2;

        console.log(clonedValues);
      } else {
        console.log(values);
      }
    }}

CodePudding user response：

this will do the job.

        onSubmit={(values) => {
      if(values.radio === 2){
        delete values['input2'];
      }
      console.log(values);
    }}