How to set initial values in formik

[Senelith]

❓Question

Hello, I have a FieldArray that have two react multi select drop downs which has default values selected in the drop downs. But I cannot access these pre-populated values on form submit. I know that in order for this to happen the pre-selected values should be set to the Formik initial values. But i cannot figure out how to do this as the field array produced is a dynamic array of objects.

initialValues={{ binderName: "", smartCabinetRequestArray: [] }}

<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 }
 />

Simply, how to set default value to location and license fields in initial values so that formik recognizes the pre selected values on Submit. Did I miss something from the docs. can't figure out what's happening. Any help would be greatly appreciated.

These default values : defaultLicense defaultLocation values retrieved from an api and passing through a function to return in the format of {value : 'test' , label: 'test'}

EDIT : object that i'm pushing using fieldArray push.

    push({
          type: "",
          document_type_id: "",
          document_type_apply_period_id: "",
          categories: [],
          location: [],
          license: []
        });

[fhollermayer]

I'm not sure if I understand your problem, but from your code samples it looks like you are bypassing Formik's value flow by ignoring the current value of e.g. smartCabinetRequestArray[${index}].license -

If you would use Field as a wrapper, or set a value property on CustomMultiSelect from props.values["smartCabinetRequestArray[${index}].license"] you could apply your default value by using initalValues object in the top-level Formik instance.

To get the values in there just take the object from your last code snippet as an element.

<Formik initialValues={
    smartCabinetRequestArray: [
    {
          type: "",
          document_type_id: "",
          document_type_apply_period_id: "",
          categories: [],
          location: [defaultLocation],
          license: [defaultLicense]
        }
    ]
} ...

You said your defaultLocation and defaultLicense both come from an external API, so maybe you need to set enableReinitialize={true} on the Formik instance or defer the renedering of it, until you got those values.

[Senelith]

@fxh1357 Thank you for your response. I'm trying to set initial values to formik where i'm using a field array. So i can't keep my initial values like you showed :

<Formik initialValues={
    smartCabinetRequestArray: [
    {
          type: "",
          document_type_id: "",
          document_type_apply_period_id: "",
          categories: [],
          location: [defaultLocation],
          license: [defaultLicense]
        }
    ]
} ...

In my case smartCabinetRequestArray must be empty on startup. I use the field array push method to add objects to my smartCabinetRequestArray.

  push({
       type: "",
       document_type_id: "",
       document_type_apply_period_id: "",
       categories: [],
       location: defaultLocation,
       license: defaultLicense
   });

i have used enableReinitialize prop

I tried setting both enableReinitialize prop to true and and this expression below

        enableReinitialize={
          defaultLocation.length > 0 || defaultLicense.length > 0
        }

        initialValues={{
          smartCabinetRequestArray: []
        }}

I'm pushing this object using the field array push method during the onChange of the below select component. When i console the props.values.smartCabinetArray which is my initial values the first object doesn't get the default location or license but the on the second object locations are initialized but the values which are supposed to be filled to the first object is set to the second object.

   <CustomMultiSelect
        name="document_type_id"
        id="document_type_id"
        options={options}
        onChange={(name, value) => {
            push({
                type: "",
                document_type_id: "",
                document_type_apply_period_id: "",
                categories: [],
                location: defaultLocation,
                license: defaultLicense
            });
            props.setFieldValue(name, value);
         }}
      />

Is the field array's push method the ideal place and way to initialize formik initial values when using field array ?? I hope you understood my problem. thanks

[fhollermayer]

I think I'm not quite there at your problem yet. Could you provide a minimal demo using codesandbox.io or something similar?

You have an array called smartCabinetRequestArray wich could be an empty array, so no initializing via initialValues. That part sounds reasonable. Your CustomMultiSelect controls are displayed all the time and you want the change in one of them to push a new element into smartCabinetRequestArray? I don't understand that part. In your last comment you changed the name to "document_type_id" which is as well the value for the name property in the onChange handler?!

[Babakabab]

@fhollermayer You did understand him and your answer worked for me as well as I was having the same question. He wants to access the initial value of a custom component through formik. Hey @Senelith. I believe the answer to your question is in @fhollermayer 's first response. You can access it through props.values["smartCabinetRequestArray[${index}].license"]