Formik arrayhelpers.remove() method always removes the last element

Viewed 18

I'm trying to set a 'time' value to formik values.

Every time "ADD LOG" button is clicked; a new object inside reject_log array is created.

this initial value is passed to formik..

initialValues={{
reject_log:[{
reject_id: "",
  reject_time: "",
  reject_status: "",
}]}}

see "RejectLogEdit".

    return (
    <>
    <Formik>
        {
          (formikProps)=>(
            <Form
              onSubmit={formikProps.handleSubmit}
              onReset={formikProps.handleReset}
            >
                <FieldArray name="reject_log"
                render={ArrayHelpers=>(
                <>
             

 {formikProps.values.reject_log.map((rejectlog, index)=>(
           <RejectLogEdit
                key={index}
                index={index}
                removeRow={(id) =>{
                 ArrayHelpers.remove(id)
                }}
                ArrayHelpers={ArrayHelpers}
                />
                    ))
                    }
                 </>
                    <CustomButton
                      type="button"
                      onClick={() => {
                      ArrayHelpers.push({
                        reject_log:[{
                        reject_id: "",
                        reject_time: "",
                        reject_status: "",
                        }]}],
      }});
                      }}
                    >
                      ADD LOG
                    </CustomButton>
                )
                }/>
                </Form>
        )}
      </Formik>
      </>

2. This is the code inside "RejectLogEdit" component..

const RejectLogEdit: React.FC = (props) => {
  const {ArrayHelpers, index, removeRow} = props;
  const { form } = ArrayHelpers;
  return (
        <StyledTableRow>
  <TableBodyCell>{RejectID(index, form)}</TableBodyCell>
<TableBodyCell>{RejectTime(index, form)}</TableBodyCell>
<TableBodyCell>{RejectStatus(index, form, removeRow)}</TableBodyCell>
                </StyledTableRow>
              )
        };

3. This is the code of RejectTime component that is being rendered on UI.

export const RejectTime = (
  index: number,
  form: any,
) => {

  return (
     <FormTimePicker
     placeholder="Reject Time"
     selectSingle
     onChange={(value) => {
        form.setFieldValue(` reject_log[${index}].reject_time `, value[0])}}
  /> 
  );
};

PS: Value of reject_time is getting removed from formikProps.values (as i see on console) however not being reflected on UI. So it looks that the last item is getting removed. Am I doing something wrong in formik.setFieldValue() ?

0 Answers
Related