Getting Picker.Item key for onValueChange React Native - react-native

Question

I have this code below:
<Picker
prompt="Select Province"
selectedValue={province}
onValueChange={(itemValue, itemIndex) => {
setProvince(itemValue);
handleProvinceChange();
}}
style={styles.form}
>
<Picker.Item label="Select Province..." value="select" />
{dProvinces.map((provinceObj) => {
return (
<Picker.Item
key={provinceObj.ProvinceID}
label={provinceObj.Province}
value={provinceObj.Province}
/>
);
})}
</Picker>
Basically I loop through an object and assign labels and values to a Picker.Item. This is what the object looks like:
{
"ProvinceID": 140100000,
"Province": "Abra",
"CountryID": 142,
"RegionID": 0
},
{
"ProvinceID": 160200000,
"Province": "Agusan del Norte",
"CountryID": 142,
"RegionID": 0
},
Getting the value is find because onValueChange has a parameters that takes itemValue, but I want to get the key from the Picker.Item and put it as an argument on my handleProvinceChange(); function.

Answer 1

You can use the itemIndex and get the item in the array like below
onValueChange={(itemValue, itemIndex) => {
setProvince(itemValue);
const ProvinceID = dProvinces[itemIndex].ProvinceID;
handleProvinceChange();
}}

Answer 2

You can use item (index) and get the item in the array
import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";
const App = () => {
const [selectedValue, setSelectedValue] = useState("java");
return (
<View style={styles.container}>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 40,
alignItems: "center"
}
});
export default App;