Formik is sending a duplicate value on onSubmit, can't figure out why

Question

when I post data on onSubmit and I log to the console the actual data that is being sent, it all looks fine except there is an extra "firstName" property in the object with a value of an empty string. So I'll see something like this:

{
  firstName: '',
  lastName: 'foo',
  email: '1@2.com',
  password: 'bar',
  firstName: 'baz'
}

Here's the relevant bits of code:

    // Signup.jsx
        <Formik
          initialValues={{
            firstname: '',
            lastName: '',
            email: '',
            password: '',
          }}
          onSubmit={handleSubmit}
          validationSchema={validationSchema}
        >
          {({ dirty, isValid }) => {
            return (
              <Form className={classes.form}>
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={6}>
                    <FormikField name="firstName" />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <FormikField name="lastName" />
                  </Grid>
                  <Grid item xs={12}>
                    <FormikField name="email" />
                  </Grid>
                  <Grid item xs={12}>
                    <FormikField name="password" />
                  </Grid>
                </Grid>

                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                  disabled={!dirty || !isValid}
                >
                  Sign Up
                </Button>
                <Grid container justify="flex-end">
                  <Grid item>
                    <Link to="/signin" variant="body2">
                      Already have an account? Sign in
                    </Link>
                  </Grid>
                </Grid>
              </Form>
            );
          }}
        </Formik>

Here's the Formik field:

// FormikField.js
const FormikField = ({ name, required, fullWidth, variant }) => {
  return (
    <div>
      <Field
        as={TextField}
        label={name}
        id={name}
        name={name}
        required={required}
        fullWidth={fullWidth}
        variant={variant}
        autoFocus
        helperText={<ErrorMessage name={name} />}
      />
    </div>
  );
};

Can't figure out why it's happening, any help would be really appreciated! Oh, not as important but I'm also having an issue where it's showing the validation message for each form immediately, rather than waiting for the user to type something into it first and then on blur seeing if it's valid - so any help on that would also be great :)

Thank you

Answer 1

I think this is your problem:

        <Formik
          initialValues={{
            firstname: '', <-- you have a typo (small n) 
            lastName: '',
            email: '',
            password: '',
          }}

It should be firstName, not firstname