how to pass a response to a react-native RNPickerSelect funtional components - react-native

Question

ok this is a very simple action that i want to do i just want to fill a RNPickerSelect with the data that i recibe from a http request , the thing is i am learning how to use react-native and i am little confused. This is the code i have :
import React,{useState} from 'react';
import RNPickerSelect from 'react-native-picker-select';
import { View, Text, Button } from 'react-native';
const getData = () => {
const xhr = new XMLHttpRequest();
xhr.open('GET','http://3.86.214.41/api/v1/web/activities');
xhr.responseType = 'json'
xhr.onload = () => {
const data = xhr.response
for (var i = 0; i < data.length; i++) {
alert(data[i].id + data[i].name);
}
}
xhr.send();
}
const Actividad = () => {
const [activityId,setActivityId] = useState('');
return (
<View>
<Text>Selecciona Actividad</Text>
<RNPickerSelect
onValueChange={activityId => setActivityId(activityId)}
items={
[ {label: 'actividad', value: '1'}]
}
/>
<Button onPress={getData} title="Get Activities" />
</View>
);
};
export default Actividad;
you can see the response i iterate just for make sure the data is there , so i want to make the list of items with that data.
from the getData funtion to the items prop inside the RNPickerSelect component hope i am clear enough so please if someone can help me i will vote your answer for thank you so much. sorry if this is to dump question but i can't find a clear and easy undertandable answer yet thanks.

Answer 1

You will need to add an extra state to your component,
const [items,setItems] = useState([ {label: 'actividad', value: '1'}]);
Then pass this state to your RNPickerSelect:
<RNPickerSelect
onValueChange={activityId => setActivityId(activityId)}
items={items}
/>
the rest is just change this items state.
we can create another function lets call it onEndGetData end this will receive your endpoint data and update items state
const onEndGetData = (payload) => {
setItems(payload.map((item) => ({ label: item.name, value: item.id })));
};
And now just pass this function to getData function so you can set state according
<Button onPress={() => getData(onEndGetData)} title="Get Activities" />
so in your getData you can use it once you have the response:
const getData = (onEndGetData) => {
...
xhr.onload = () => {
onEndGetData(xhr.response);
}