how to set initial values to formik field array?

Viewed 4808

I'm trying to set some values to formik initial values prop. This would have been easier if my form is not using <FieldArray /> in formik.

I have two components, my parent component which has all the handler functions of my form and then there's my child component where formik is used. I need to set the initial values of formik form on initialization. Below is the code of the dropdown where i use the push method.

             <Formik
                enableReinitialize={defaultLocation.length > 0}
                initialValues={{
                  smartCabinetRequestArray: []
                }}
              render={props => {
               return (
                  <Form onSubmit={props.handleSubmit}>
                    <div className="form-body">
                      <FieldArray
                       name="smartCabinetRequestArray"
                       render={({ remove, push }) => (
                           <CustomMultiSelect
                            name="document_type_id"
                            id="document_type_id"
                            options={options}
                            onChange={(name, value) => {
                                if (value !== null) {
                                  if (value.length > selectedDocumentTypes.length) {
                                    push({
                                      type: "",
                                      document_type_id: "",
                                      document_type_apply_period_id: "",
                                      categories: [],
                                      location: defaultLocation,
                                      license: defaultLicense
                                    });
                                  } 
                                }
                            props.setFieldValue(name, value);
                           }}
                           value={selectedDocumentTypes}
                           isDisabled={isDocDropDownDisabled}
                         />
                     )
                    </div>
                  </Form>
                );
            }}

During the above onChange handler I push the above object using the FeildArray's push method. Inside the push method there are two attributes location and license and I've assigned them with defaultLocation, defaultLicense respectively.

Inside the field Array i have another two multi select dropdowns from the react select npm package. If the length of array variables defaultLocation and defaultLicense are greater than 0 i set these as the default values to the select components.

<CustomMultiSelect
 name={`smartCabinetRequestArray[${index}].location`}
 id={`smartCabinetRequestArray[${index}].location`}
 options={locationOptions}
 onChange={(name, value) => props.setFieldValue( name, value)}
 onBlur={props.setFieldTouched}
 defaultValue={ defaultLocation.length > 0 && defaultLocation }
/>

<CustomMultiSelect
 name={`smartCabinetRequestArray[${index}].license`}
 id={`smartCabinetRequestArray[${index}].license`}
 options={licenseOptions}
 onChange={(name, value) => props.setFieldValue( name, value)}
 onBlur={props.setFieldTouched}
 defaultValue={ defaultLicense.length > 0 && defaultLicense }
/>

The problem is that eventhough the react select component set the default value, formik doesn't recognize the selected value. Formik recognizes the preselected value only if the onChange handler is triggered.

In the first code block i used the FieldArray's push method to initialize the location and license attributes with defaultLocation and defaultLicense variables. defaultLocation and defaultLicense are states that i hold in my parent component which are passed down to the child component(to the form with formik). I understand that I have to set the preselected values to the formik initial values, but I'm not sure whether I'm using the correct approach.

0 Answers
Related