useFormik React - Update initialValues

Question

I am using useFormik hook for my data handling. Adding the data is fine, but when I want to update the data in the same component I need to change the initial values to the custom object instead of having empty strings. Is there formik way of doing that with useFormik Hook? although I can achieve that with states, but then what will be the benefit of using the formik all along. Kindly help!

const formik = useFormik({
        initialValues: {
            name: '',
            post: '',
            contact: '',
            email: '',
            password: '',
        },
        onSubmit: values => {
            //handling submit
        },
    });

Form:

  <form className={classes.form} onSubmit={formik.handleSubmit}>
                    <Grid container spacing={2}>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                autoComplete="name"
                                variant="outlined"
                                required
                                fullWidth
                                label="Name"
                                autoFocus
                                id="name"
                                name="name"
                                onChange={formik.handleChange}
                                value={formik.values.name}
                            />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                label="Post"
                                autoComplete="post"
                                id="post"
                                name="post"
                                onChange={formik.handleChange}
                                value={formik.values.post}

                            />
                        </Grid>
//Submit button and form close etc

Thanks

Why would you want to update initial values? If you updated initial values they wouldn't just be initial values. — pfcodes
– pfcodes, Commented Dec 9, 2020 at 7:02
Like when a user clicks on the edit icon, the custom values should be populated, thus I want to change the initial values. — Mehdi Raza
– Mehdi Raza, Commented Dec 9, 2020 at 7:31

Mehdi Raza · Accepted Answer · 2020-12-09 07:40:20Z

11

I found the solution that is: For One field

const editEmployee = ()=> {
    formik.setFieldValue("name","Imran");
    alert("changed")     
}

For Multiple:

formik.setValues({"name":"hey","post":"hoii"});

or send the whole Object

edited Dec 9, 2020 at 7:40

answered Dec 9, 2020 at 7:34

Mehdi Raza

3854 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Organic Over a year ago

This updates the formik values not initialValues, which is what you asked on the title. Maybe it's fine for your use case but it's not the answer to the question.

Collectives™ on Stack Overflow

useFormik React - Update initialValues

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related