withFormik : On initial value change, update props.value

19,254
withFormik({
    enableReinitialize: true,
    mapPropsToValues: (props: Props) => {

Add enableReinitialize: true, solved the issue

https://github.com/jaredpalmer/formik/issues/168

Share:
19,254
Abel Jojo
Author by

Abel Jojo

Updated on June 18, 2022

Comments

  • Abel Jojo
    Abel Jojo almost 2 years

    Once the initial props changes, the values in the forms need to be updated

    export default withFormik({
        mapPropsToValues: (props: Props) => {
            return (
                {
                    id: props.initialData.id,
                    name: props.initialData.name
                }
            );
        },
        handleSubmit: (values, {  props: Props, setSubmitting }) => {
          Props.submitHandler(values);
        },
      })(NewDatasourceForm);
    

    Here in mapPropsToValues I am able to get the new props, But the values in form not get updated.

    const NewDatasourceForm = (props) => {
    const {
        values,
        touched,
        errors,
        isSubmitting,
        setFieldValue,
        handleSubmit,
        handleChange,
        handleBlur
    } = props;
    
    const _handleSelect = (selectDSChoice) => {
        try {
            setFieldValue('dataSourceType',  selectDSChoice.value);
        } catch (error) {
            // tslint:disable-next-line:no-console
            console.error(error);
        }
    
    };
    
    return(
      <form className="needs-validation was-validated p-5" onSubmit={handleSubmit}>
    
            <div className="form-group">
                <label>Name</label>
                <input
                    className={`form-control`}
                    name="name"
                    type="text" 
                    value={values.name} 
                    onChange={handleChange}
                    onBlur={handleBlur}
                />
            </div>
        </form>
    );
    };
    

    https://codesandbox.io/s/k5w5qn94z7

    Thanks for support.