How to fill picker in react native from array - arrays

Question

i want to fill a picker items from array .. this array store data from local storage and i want to display this data on picker
this is my function that retrieve data from local storage
async getElementsInLocalStorage() {
try{
let x = [];
let all_keys = await AsyncStorage.getAllKeys();
for(i = 1; i <= all_keys.length;i++ ){
let converter = JSON.parse(await AsyncStorage.getItem('one_person'+i));
x[i] = converter.first_name + ' ' + converter.last_name;
}
this.setState({all_options: x, data: x,});
} catch(error){
alert(error)
}
}
And this is my constructor
constructor(){
super();
this.state = {
first_name: '',
last_name : '',
all_options : [],
};
data = [];
}
And this is my Picker
<Picker selectedValue = {this.state.selected} >
{this.state.data.map((value)=><Picker.Item label={value} value={value}/>)}
</Picker>
when type data only in picker picker not filled but when type this.state.data
this is error return

Answer 1

You have defined data as a seperate variable in constructor. But after fetching data you are considering data as a state variable.
Just declare data inside state, and that might solve your issue.
constructor(){
super();
this.state = {
first_name: '',
last_name : '',
all_options : [],
data:[]
};
}

Answer 2

Can you try this. What I did is
Moved data inside state and added conditional check before doing .map
constructor(){
super();
this.state = {
first_name: '',
last_name : '',
all_options : [],
data = []
};
}
And this is my Picker
<Picker selectedValue = {this.state.selected} >
{this.state.data && this.state.data.map(value=> (<Picker.Item label={value} value={value}/>))}
</Picker>