Nested schema and conditionally setting the default field value using resolveProps results in a warning

[rustoma]

Scope: form-renderer

Description

I have a fairly complex form with nested fields. I use resolveProps to determine the default value. Using formOptions.change() results in a warning as below.

Calling this method using setTimeout does not display the warning.

I know there used to be a similar problem related to React 16 and react-final-form, but I can't find a solution anywhere.

I would expect that using formOptions.change() in resolveProps would not result in a warning.

Using data-driven-forms with resolveProps results in a warning:

Warning: Cannot update a component (`FieldArray`) while rendering a different component (`Radio`). To locate the bad setState() call inside `Radio`, follow the stack trace as described in https://fb.me/setstate-in-render
    in Radio (created by SingleField)
    in FormFieldHideWrapper (created by SingleField)
    in FormConditionWrapper (created by SingleField)
    in SingleField (created by ArrayItem)
    in ArrayItem (at FieldArrayCustom.tsx:91)
    in FieldArray (at FieldArrayCustom.tsx:65)
    in FieldArrayCustom (created by SingleField)
    in FormFieldHideWrapper (created by SingleField)
    in FormConditionWrapper (created by SingleField)
    in SingleField (created by ArrayItem)
    in ArrayItem (at FieldArrayCustom.tsx:91)
    in FieldArray (at FieldArrayCustom.tsx:65)

Schema

The schema looks similar to the one below

const schema = {
  component: CustomComponentTypesEnum.ARRAY_STEPS,
  name: 'array_1',
  fieldKey: 'field_array',
  fields: [
    {
      component: CustomComponentTypesEnum.ARRAY_CUSTOM,
      name: 'array_2',
      fieldKey: 'field_array_tabs',
      fields: [
        {
          component: componentTypes.RADIO,
          name: 'name_x',
          label: '',
          options: [
            {
              label: 'Label 1',
              value: 'value_1',
            },
            { label: 'Label 2', value: 'value_2' },
          ],
        },
        {
          component: CustomComponentTypesEnum.ARRAY_CUSTOM,
          name: 'name_y',
          fieldKey: 'field_name_y',

          fields: [
            {
              component: componentTypes.RADIO,
              name: 'radio_1',
              label: '',
              options: [
                {
                  label: 'Label 1',
                  value: 'value_1',
                },
                { label: 'Label 2', value: 'value_2' },
              ],

              resolveProps: (_props, _field, formOptions) => {
                const setFieldDefaultValue = setDefaultValue(
                  formOptions,
                  _field.input.name,
                )

                // Logic to determine conditions
                //   ...

                //If some conditions are met trigger function
                if (someConditionsAreMet) {
                  setFieldDefaultValue(example_value')
                }
              },
            },
          ],
        },
      ],
    },
  ],
}

const setDefaultValue = (form, fieldName) => (value) => {
  if (!_.get(form.getState().values, fieldName)) {
    // Without setTimeout I get a warning
    form.change(fieldName, value)

    // With setTimeout everything is ok
    setTimeout(() => form.change(fieldName, value), 0)
  }
}

[rvsia]

Hello @RusinTom,

The warning is correct - resolveProps serves to get props dynamically using formState, it is just a method called when passing props to the component.

As stated in the rules of resolveProps (read here), this should not be used to do any side effects.

For your use case, I recommend to implement some custom listener, see the example here and to do side effects in useEffect hook.

[rustoma]

Thanks a lot for the quick reply. I will try to create a custom listener.