I Have objects in Array and I want to show error validation if object value is empty. I'm using Formik FieldArray and Yup validation

1
votes

I Have objects in Array and I want to show error validation if the object id_jabatan is empty. I'm using Formik FieldArray and Yup validation, but I get errors Cannot read property '0' of undefined

Here is my formInitialValues:

const formInitialValues = {
  pemeriksa: [
    { value: '', label: '', id_jabatan: '' },
  ],
  penyetuju: {}
}

also the formValidationSchema:

const formValidationSchema = Yup.object().shape({
  pemeriksa: Yup.array().of(
    Yup.object().shape({
      value: Yup.string().required('Pilih Pemeriksa'),
    })),
  penyetuju: Yup.object('Pilih Penyetuju').shape({
    value: Yup.string().required('Pilih Penyetuju')
  }).required()
});

and this is my Select component inside FieldArray Formik:

              <FieldArray
                  name="pemeriksa"
                  render={(arrayHelpers) => {
                    arrayHelperRef.current = arrayHelpers
                    return (
                      <div>
                        {values.pemeriksa && values.pemeriksa.length > 0 ? (
                          values.pemeriksa.map((pemeriksa, index) => {
                            return (
                              <div className='d-flex flex-row justify-content-between align-items-end' key={index}>
                                <div className='col-md-10 pr-0'>
                                  {/* FIELD SELECT PEMERIKSA */}
                                  <SelectSearch
                                    loading={isLoading}
                                    key={index}
                                    label={`Pemeriksa ${index + 1}`}
                                    placeholder={`Pilih Pemeriksa ${index + 1}`}
                                    defaultValue={values.pemeriksa[index] ?? { value: null, label: `Pilih Pemeriksa ${index + 1}` }}
                                    onChange={(val) => {
                                      arrayHelpers.replace(index, val)
                                    }}
                                    option={dataJabatan.map((val) => {
                                      return {
                                        value: val.id_jabatan,
                                        label: val.nama_jabatan,
                                        id_jabatan: val.id_jabatan
                                      };
                                    })}
                                    error={errors.pemeriksa[index].id_jabatan && touched.pemeriksa[index].id_jabatan && true}
                                    errorText={errors.pemeriksa[index].id_jabatan}
                                  />
                                </div>

                                <div className='pb-2'>
                                  <DeleteButton
                                    onClick={() => {
                                      arrayHelpers.remove(index)
                                      setIsLoading(true)
                                    }} />
                                </div>
                              </div>
                            )
                          })
                        ) : (<div />)}
                      </div>
                    )
                  }}
                />

Here are some screenshot : When I hit save button, it should show Formik errors warning, because Select value is empty

But, I get this error

javascriptreactjsformikyup