react-native-dropdown-picker
react-native-dropdown-picker copied to clipboard
hossein-zare
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}
/>
}
}
Nope, and it's not a use case for me (as current person helping maintain repo) so any investigation + solution will need to be community driven. Someone's going to have to dig in here and discover why + what then generate a fix or document it better
@LGZ04
We don't have defaultValue in 5.x series.
Use value instead.
https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage#value
@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
Saying something like facing the same problem isn't helpful, Others may make different mistakes while the results are the same.
That's not really helping me neither anywhere. State is an array and it's not working. In Picker.js at row 1169 state is undefined, and that's why it's not working. Another question is, why that is undefined.
Anyway I did this change to my codebase and added undefined check, works fine now.
let _state = state !== null && state !== undefined ? [...state] : [];
@kjoonas1 What's the package version? It would be better to provide your code and state variables.
5.2.3 is the version.
interface LabelValueObject {
label: string
value: string | number | boolean
}
interface SelectorProps {
items: LabelValueObject[]
value: LabelValueObject['value'] | LabelValueObject['value'][]
setValue: Dispatch<any>
placeholderTx?: TxKeyPath
placeholder?: string
style?: ViewStyle
textStyle?: TextStyle
multiselect?: boolean
}
export const Selector: FC<SelectorProps> = ({
items,
multiselect,
value,
setValue,
placeholderTx,
placeholder,
}) => {
const [open, setOpen] = useState(false)
if (!items || !items.length) return null
return (
<DropDownPicker
multiple={multiselect}
open={open}
value={value}
items={items}
setOpen={setOpen}
placeholder={placeholderTx ? translate(placeholderTx) : placeholder}
setValue={setValue}
closeAfterSelecting
listMode="MODAL"
/>
)
}
Thats how i'm using it. Value is an array of numbers, styles are stripped off to keep it simple.
@kjoonas1 I didn't see anything wrong in your code, You can also log the value in the function to see if you get an undefined value before passing it to the picker.
export const Selector = ({...}) => {
console.log("Picker value:", value);
const [open, setOpen] = useState(false)
...
It's not, only number array is passed as value. Console log is done way before opening an issue 😄
@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.
No idea what caused that. Didn't change code, just tried today, and the problem is gone. Maybe some odd cache problem, because I updated lib from 5.1 to 5.2.
Facing the same problem. Looks like setValue always references the old state value.
undefined is not an object (evaluating 'props.defaultValue[0]') in react-native-dropdown-picker in version ^3.8.3 please help me
const [open, setOpen] = useState(false);
const [value, setValue] = useState([]);
const [items, setItems] = useState([
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'Orange' }
]);
<DropDownPicker
open={open}
multiple={true}
min={0}
max={5}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
undefined is not an object (evaluating 'props.defaultValue[0]') in react-native-dropdown-picker in version ^3.8.3 please help me
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;
