How to remove data when I am adding or removing the form dynamatically?

Viewed 14

My component structure is like this.

<AssessmentForm>
  <ConditionField>
    <QuestionnaireAnswerdField>
    </QuestionnaireAnswerdField>
  </ConditionField>
</AssessmentForm>

In the assessment form component, I got something like this

export const AssessmentForm = ({
  initialValues,
  onSubmit,
  onCancel,
}: AssessmentFormProps) => {
  const formik = useFormik<Assessment>({
    initialValues,
    onSubmit,
    validationSchema,
  });

  return (
    <FormikProvider value={formik}>
      <Form data-cy="assessment-form" onSubmitCapture={formik.handleSubmit}>
 
        <Field name="condition" component={ConditionField} />

      </Form>
    </FormikProvider>

In the ConditionField Component

export const ConditionField = ({
  field: { name, value },
  form: { setFieldValue: setFieldValueParent },
}: FieldProps<Condition>) => {
  const formik = useFormik<Condition>({
    onSubmit: () => console.log(''),
    initialValues: {
  "type": "questionnaireAnswered",
  "config": {
    "questionnaireId": "stub-0005",
    "criterion": {
      "type": "answer",
      "config": {
        //CHOICE LABELS ARE DYNAMIC FORM
        "choiceLabels": [
          "awef 0",
          "awef 1",
          "awef 2",
          "awef"
        ],
        "questionRef": "awef"
      }
    },
    "inCurrentPhase": true
  }
}
  });

  useEffect(() => {
    setFieldValueParent(name, formik.values);
  }, [formik.values, setFieldValueParent, name]);

  return (
    <FormikProvider value={formik}>
         <Field
            name="config"
            component={ConditionConfigQuestionnaireAnsweredField}
          />
    </FormikProvider>

in the QuestionnaireAnswerdField

export const ConditionConfigQuestionnaireAnsweredField = ({
  field: { name, value },
  form: { setFieldValue: setFieldValueParent },
}: FieldProps<any>) => {
  const questionnairesInStudy = useQuestionnairesInStudy();
  const { setFieldValue, values, handleChange, handleBlur } =
    useFormik<any>({
      initialValues: {
        ...value,
      },
      onSubmit: doNothing,
    });
  const [numOfChoices, setNumOfChoices] = useState<number>(1);

  useEffect(() => {
    value?.criterion?.config?.choiceLabels?.length &&
      setNumOfChoices(value?.criterion?.config?.choiceLabels?.length);
  }, []);

  useEffect(() => {
    const tmpValues = { ...values };
    const choiceLabelsLength = tmpValues.criterion?.config?.choiceLabels.length;
    if (tmpValues.criterion?.config?.choiceLabels) {
      tmpValues.criterion.config.choiceLabels.pop;
    }

    setFieldValueParent(name, tmpValues);
  }, [numOfChoices, setFieldValueParent]);

  const handleAddCriterionChoice = () => {
    setNumOfChoices(numOfChoices + 1);
  };
  const handleRemoveCriterionChoice = () => {
    let tmpValues = { ...values };
    let t = tmpValues;
    if (numOfChoices >= 2) {
      setNumOfChoices(numOfChoices - 1);
    }

   if (tmpValues.criterion?.config?.choiceLabels) {
    let b = t?.criterion?.config?.choiceLabels;
    if (b) {
    b.pop();
      console.log(b.length);
     }
   }

    setFieldValueParent(name, tmpValues);
  };

  return (
    <>
      <Form.Item label="Criterion question">
        <Input
          placeholder="Question Reference"
          name="criterion.config.questionRef"
          value={value?.criterion?.config?.questionRef}
          onChange={handleChange}
          onBlur={handleBlur}
        />
      </Form.Item>

      <Form.Item label="Criterion Choices">
        {Array.from(Array(numOfChoices)).map((x, index) => (
          <Input
            placeholder="Choice"
            name={`criterion.config.choiceLabels[${index}]`}
            value={value?.criterion?.config?.choiceLabels[index]}
            onChange={handleChange}
            onBlur={handleBlur}
          />
        ))}

        <Button
          disabled={!value?.criterion?.type}
          onClick={() => {
            handleAddCriterionChoice();
          }}
        >
          +
        </Button>
        <Button
          disabled={!value?.criterion?.type}
          onClick={() => {
            handleRemoveCriterionChoice();
          }}
        >
          -
        </Button>
      </Form.Item>
    </>
  );
};

What I want to ask is for the handleRemoveCriterionChoice

I already tried manyway but its not working correctly. What happen is that whenever I tried to pop the last value of the array or delete the last value of the choiceLabel its giving me this error property 3 is non-configurable and can't be deleted

0 Answers
Related