Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

useFormik React - Update initialValues

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

like image 945
Mehdi Raza Avatar asked Dec 09 '20 06:12

Mehdi Raza


People also ask

What is useFormik in React?

useFormik() is a custom React hook that will return all Formik state and helpers directly. Despite its name, it is not meant for the majority of use cases. Internally, Formik uses useFormik to create the <Formik> component (which renders a React Context Provider).

Is Formik dirty?

dirty: boolean Returns true if values are not deeply equal from initial values, false otherwise. dirty is a readonly computed property and should not be mutated directly.

What is getFieldProps in React?

getFieldProps in React , an alternative for onChange , onBlur and value for a given form field. Posted on September 17, 2020 September 26, 2021 by Banwari Lal.

How do you use handleChange in Formik?

Now we must write the handleChange method to update the state with user inputs: handleChange = ({ target }) => { const { formValues } = this. state; formValues[target.name] = target. value; this.


1 Answers

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

like image 115
Mehdi Raza Avatar answered Nov 15 '22 03:11

Mehdi Raza