Search code examples
reactjssemantic-uireact-final-formfinal-form

getting error Dropdown `value` must be an array when `multiple` is set

I am getting this error

**Dropdown `value` must be an array when `multiple` is set.**

I am using multiselect dropdown in semantic ui react. when I run my application getting error

Dropdown value must be an array when multiple is set.

here is my code https://codesandbox.io/s/optimistic-field-56zpm

<RFField
              component={SingleSelectAutoComplete}
              label="I agree to the Terms and Conditions"
              name="dropdown"
            />

enter image description here

API

https://react.semantic-ui.com/modules/dropdown/#types-clearable-multiple

Solution

  • The errors in the console are pretty clear about what you need to change.

    Looking at the first message:

    Dropdown prop "value" is auto controlled. Specify either defaultValue or value, but not both.

    Since you are using a form manager (react-final-form), the field values are being managed by the Form component. So you should remove the defaultValue prop from the Dropdown component:

          <Dropdown
        ...
        selection
        options={data}
        defaultValue={[]} // remove this prop

    The second error:

    Dropdown value must be an array when multiple is set. Received type: [object String].

    I think react-final-form initializes unknown values as an empty string. So you should define the "dropdown" value as an empty array in the initialValues prop of the Form:

          <RFFORM
        initialValues={{
          dropdown: [],
        }}
        onSubmit={onSubmit}

    Here is a working sandbox: https://codesandbox.io/s/great-gould-fepxk