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