I am trying to populate a React Native picker with an array of strings I have stored in my state:
constructor(props) {
super(props);
this.state = {
designations: ["test", "test2"],
...
}
...
}
What I would like, is for my Picker element to populate the Picker.Items from the values inside this array in my state.
Here is my picker:
<Picker
selectedValue={this.state.designations[0]}
onValueChange={(itemValue, itemIndex) => this.setState({ designation: itemValue })}
{...Object.keys(this.state.designations).map((key) => {
return (<Picker.Item label={this.state.designations[key]} value={key} key={key}/>)
})}
/>
I do not receive an error with this configuration, however the Picker has no items at all.
After reading This thread about doing exactly what I'm trying to do, I notice that they do not have a spread operator (...) infront of "Object" in theirs. However, when I try and do that in my code I recieve the following error:
'...' expected.
I have also tried the following (also from that thread):
{...this.state.designations.map((item, index) => {
return (<Picker.Item label={item} value={index} key={index}/>)
})}
But unfortunately it is exactly the same as the above issue. I get an error if I do not use the spread operator, and when I do use the spread operator the picker list is not populated.
Any help or directions to look would be very welcome.
