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: '[email protected]', 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
