This works as expected, where the picker stays on the selected item...
<Picker
selectedValue={this.state.person}
onValueChange={(itemValue) => this.setState({person: itemValue})}
style={styles.picker}>
{Object.keys(coWorkers)
.map((result, index) =>
<Picker.Item
label={`${coWorkers[result].name}(${coWorkers[result].likes})`}
value={coWorkers[result].name}
key={index}
/>
)
}
</Picker>
I want to get multiple key/values from the coWorkers
object in this.setState
, so I am trying this...
<Picker
selectedValue={this.state.person}
onValueChange={(itemValue) => this.setState({person: itemValue.name, likes: itemValue.likes})}
style={styles.picker}>
{Object.keys(coWorkers)
.map((result, index) =>
<Picker.Item
label={`${coWorkers[result].name} (${coWorkers[result].likes})`}
value={coWorkers[result]}
key={index}
/>
)
}
</Picker>
However, now the picker jumps back to the top (this.state
is being correctly updated though).
The type of the prop value
for the Picker should be either string or integer. It is not clear from the docs on the website but you can see it in the Picker source code comments here https://github.com/facebook/react-native/blob/master/Libraries/Components/Picker/Picker.js
It does a simple equal check of selectedValue and picker items value to translate it to the native PickerIOS understands. https://github.com/facebook/react-native/blob/master/Libraries/Components/Picker/PickerIOS.ios.js#L53
Although the contents are same the object this.state.selectedValue
and matching coWorkers[result]
are different objects
You can generate some unique ids for each item in the array and use that to lookup the object.