How to update specific form field in formik when value changes in redux store?

Question

I am using formik in my react application. I have initialized all the form values from a state. But I wanted to update a specific form field if props in the redux store change. Below is my formik form:

<Formik
initialValues={this.state.branchData}
enableReinitialize={true}
onSubmit={this.formSubmit} >
{({ values, setFieldValue }) => (
    <Form >
        <Row>
            <Col lg="12">

                <FormGroup className="col-6">
                    <Input type="select" value={values.StateId} name="StateId" onChange={this.handleChange(setFieldValue)}>
                        <option value='' >Select State</option>
                        {this.props.stateList && this.props.stateList.map((item, i) => (
                            <option key={i} value={item.StateId}>
                                {item.StateName}
                            </option>
                        ))}
                    </Input>
                    {this.validator.message('state', values.StateId, 'required')}
                    <Label className="impo_label">Select State</Label>
                </FormGroup>

                <FormGroup className="col-6">
                    <Field className="form-control" name="GstNo" type="text" maxLength="15" />
                    <Label className="impo_label">GST No</Label>
                    {this.validator.message('gst no', values.GstNo, 'required|min:15|max:15')}
                </FormGroup>


            </Col>
        </Row>
    </Form>
)}

Now, When I change state from the dropdown, an api will get invoke which will return gst no by state id. I want to update the gst no field with the value recieved from the api in the props. If the gst no received is null then I want user to input the gst no, but if gst no is recieved from the api, I want to update the gst no field in form with the value received in props and disable the form input. I cannot update the gstno in this.state.branchData as this will reset the form values with values in this.state.branchData.

Does anyone have any idea about how to achieve this in formik?

Answer 1

You can enable enableReinitialize property of Formik to update the field.

<Formik
   enableReinitialize={true}
   initialValues={...}
>
....

Answer 2

When data comes from api. You can just easy change value of field like this:

setFieldValue('GstNo', valueFromApi)