How to change initial values in Formik?
2 answers
@bernard.rippin
To change the initial values of a form in Formik, you can use the initialValues prop of the Formik component.
Here's an example of how you can do this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import { Formik } from 'formik'; const initialValues = { name: '', email: '', password: '', }; <Formik initialValues={initialValues} onSubmit={(values, actions) => { console.log(values); }} > {props => ( <form onSubmit={props.handleSubmit}> <input type="text" name="name" onChange={props.handleChange} value={props.values.name} /> <input type="email" name="email" onChange={props.handleChange} value={props.values.email} /> <input type="password" name="password" onChange={props.handleChange} value={props.values.password} /> <button type="submit">Submit</button> </form> )} </Formik> |
In this example, the initial values of the form fields are defined in the initialValues object, and these values are passed to the Formik component through the initialValues prop. The form fields are then connected to these values using the value prop. When the user updates the form fields, the new values are handled by the handleChange function, which is passed to the form fields through the onChange prop.
@bernard.rippin
To change the initial values in Formik, you can update the initialValues object and pass it as a prop to the Formik component. Here's an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { Formik } from 'formik';
const initialValues = {
name: '',
email: '',
password: '',
};
const MyForm = () => {
const handleSubmit = (values, actions) => {
console.log(values);
actions.setSubmitting(false);
};
const handleReset = (values, actions) => {
actions.resetForm(initialValues);
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
>
{props => (
<form onSubmit={props.handleSubmit}>
<input
type="text"
name="name"
onChange={props.handleChange}
value={props.values.name}
/>
<input
type="email"
name="email"
onChange={props.handleChange}
value={props.values.email}
/>
<input
type="password"
name="password"
onChange={props.handleChange}
value={props.values.password}
/>
<button type="submit">Submit</button>
<button type="button" onClick={props.handleReset}>Reset</button>
</form>
)}
</Formik>
);
};
export default MyForm;
|
In this example, we define the initialValues object with the initial values for the form fields. Then, we pass this object as the initialValues prop to the Formik component.
Inside the Formik component, we can access the form field values and form-related functions through the props object. For each form field, we set the value prop to the corresponding value from props.values and the onChange prop to props.handleChange.
To reset the form to its initial values, we define a handleReset function that calls props.resetForm(initialValues).
Note: The resetForm function is available from Formik version 2.1.0 and above. If you are using a lower version, you can use props.setValues(initialValues) instead.