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() ?