react-native-dropdown-picker: Unable to select multiple values

im having problems when I want to select multiple items. When I select one option they throw me this error: TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.

Anyone know how to solved this problem??

im using the version: “react-native-dropdown-picker”: “^5.1.21” here is what im doing:

export default class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            openCurrencyDropDown: false,
            data: [
                { label: 'Op1', value: "Op1" },
                { label: 'Op2', value: "Op2" },
                { label: 'Op3', value: "Op3" },
                { label: 'Op4', value: "Op4" },
                { label: 'Op5', value: "Op5" },
                { label: 'Op6', value: "Op6" },
            ],
            value: [],
        }
        this.setValue = this.setValue.bind(this);
    }

   setValue(callback) {
        this.setState(state => ({
            value: callback(state.value)
        }));
    }

    render() {
             <DropDownPicker
                   listMode={'MODAL'}
                   multiple={true}
                   min={0}
                   max={5}
                   open={this.state.openCurrencyDropDown}
                   setOpen={this.setOpenCurrencyDropDown}
                   setValue={this.setValue}
                   items={this.state.data}
                   defaultValue={this.state.value}
                />
    }
}

About this issue

Original URL
State: open
Created 3 years ago
Comments: 18 (6 by maintainers)

Most upvoted comments

@kjoonas1 Note that your state variable (value) must be an array []

Follow the official example: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage/#multiple-items

hossein-zare on Nov 3, 2021

Hello @hossein-zare , @kjoonas1, @mikehardy Need some help here, the selected items are not getting displayed in class based component. I debugged and found multiple values are actually getting selected but not getting display

Please check the below link for live example: https://snack.expo.dev/@amitvarshney/1e644a

Please check the below example

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

class App extends Component {
  constructor(props) {
    super(props);
    this.setValue = this.setValue.bind(this);
    this.setItems = this.setItems.bind(this);
  
    this.state = {
      dropOpen: false,
      selectedValue: [],
      items: [
        { label: 'Spain', value: 'spain' },
        { label: 'Madrid', value: 'madrid', parent: 'spain' },
        { label: 'Barcelona', value: 'barcelona', parent: 'spain' },

        { label: 'Italy', value: 'italy' },
        { label: 'Rome', value: 'rome', parent: 'italy' },

        { label: 'Finland', value: 'finland' },
      ],
    };
  }
    setOpen = open => {
    this.setState({
      dropOpen: open,
    });
  };

  setValue = callback => {
    this.setState(state => {
      const cbValue = callback(state.value);
      debugger;
      return {
        value: cbValue,
      };
    });
  };

  setItems = callback => {
    this.setState(state => {
      const cbValue = callback(state.items);
      debugger;
      return {
        items: cbValue,
      };
    });
  };
  render() {
    return (
      <View style={{marginTop:50}}>
      <DropDownPicker
          open={this.state.dropOpen}
          value={this.state.selectedValue}
          items={this.state.items}
          setOpen={this.setOpen}
          setValue={this.setValue}
          setItems={this.setItems}
          // theme='DARK'
          multiple
          mode='BADGE'
          badgeDotColors={[
            '#e76f51',
            '#00b4d8',
            '#e9c46a',
            '#e76f51',
            '#8ac926',
            '#00b4d8',
            '#e9c46a',
          ]}
        /></View>
    )
  }

}
export default App;

amitv1992 on Jul 4, 2023

@kjoonas1 Interesting! setValue’s callback always gets the current value, The value variable isn’t undefined while the value param in the callback is undefined.

setValue(state => {

});

The value doesn’t change until you press an item, There’s something wrong on your side i believe.

I encourage you to try firing the setValue in a useEffect:

export const Selector = ({...}) => {
  useEffect(() => {
    setValue(state => {
      console.log("setValue callback value", state);

      return state;
    });
  }, []);

  ...

Don’t forget to restart your app after the changes.

hossein-zare on Nov 3, 2021