Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

formik fields are not getting value

Tags:

reactjs

formik

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?

like image 668
Banafshe Alipour Avatar asked May 03 '26 22:05

Banafshe Alipour


1 Answers

I added enableReinitialize in Formik component and it worked.

like image 96
Banafshe Alipour Avatar answered May 05 '26 12:05

Banafshe Alipour



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!