formik fields are not getting value

Viewed 1328

I'm using Formik in my React and redux project, but Formik fields are not getting value and onChange field function not working! this form is for editing a customer. I'm using Formik in another part of project and i don't have a problem. I don't know what to do?

<Formik
            initialValues={props.selectedCustomer.id ? props.selectedCustomer : emptyCustomer}
            validationSchema={customerValidationSchema}
            onSubmit={async (values: ICustomer, actions: FormikActions<any>) => {
                console.log(values)
                try {
                    await postCustomer(values)
                    props.selectedCustomer.id ? enqueueSnackbar('success') : enqueueSnackbar('fail')
                    actions.resetForm()
                    getCustomers(pageNum, pageSize)
                    setAddDialog(false)
                }
                catch (error) {
                    enqueueSnackbar(error, { variant: 'default' })
                }
            }}
          >
          {() => (
          <Form id="addCustomerForm">
          <div id="addCustomerDiv" className={clsx({
            [classes.noDisplay]: !addDialog
          })}>
              <Grid style={{marginRight: '0.5rem'}} container spacing={5}>
                 <Grid item xs={2}>
                  <Field
                      name="firstName"
                      render={({ field, form }: FieldProps<ICustomer>) => (
                          <TextField
                              margin="dense"
                              id="firstName"
                              label="firstName"
                              fullWidth
                              {...field}
                              error={form.errors.firstName && form.touched.firstName ? true : false}
                          />
                      )}
                  />
                </Grid>         
              <Button
              type='submit'
              form="addCustomerForm"
              color="primary"
              variant="contained"
              style={{marginTop: '3rem'}}
              className={clsx({
                [classes.noDisplay]: !addDialog
              })}
              >
              submit
              </Button>
              </Grid>              
          </Grid>
          </div>
          </Form>
          )}
          </Formik>

what is the problem?

1 Answers

I added enableReinitialize in Formik component and it worked.

Related