Data gotten from endpoint does not show in Picker - json

Question

So am trying to get this into the dropdown Picker.
When i send a request to the server , i get this back as response.
{
"status": "success",
"message": "Banks fetched successfully",
"data": [
{
"id": 132,
"code": "560",
"name": "Page MFBank"
},
{
"id": 133,
"code": "304",
"name": "Stanbic Mobile Money"
},
{
"id": 134,
"code": "308",
"name": "FortisMobile"
},
{
"id": 135,
"code": "328",
"name": "TagPay"
},
{
"id": 136,
"code": "309",
"name": "FBNMobile"
},
{
"id": 137,
"code": "011",
"name": "First Bank of Nigeria"
},
{
"id": 138,
"code": "326",
"name": "Sterling Mobile"
},
{
"id": 139,
"code": "990",
"name": "Omoluabi Mortgage Bank"
},
{
"id": 140,
"code": "311",
"name": "ReadyCash (Parkway)"
},
{
"id": 141,
"code": "057",
"name": "Zenith Bank"
},
{
"id": 142,
"code": "068",
"name": "Standard Chartered Bank"
},
{
"id": 143,
"code": "306",
"name": "eTranzact"
},
{
"id": 144,
"code": "070",
"name": "Fidelity Bank"
},
{
"id": 145,
"code": "023",
"name": "CitiBank"
},
{
"id": 146,
"code": "215",
"name": "Unity Bank"
},
{
"id": 147,
"code": "323",
"name": "Access Money"
},
{
"id": 148,
"code": "302",
"name": "Eartholeum"
},
{
"id": 149,
"code": "324",
"name": "Hedonmark"
},
{
"id": 150,
"code": "325",
"name": "MoneyBox"
},
{
"id": 151,
"code": "301",
"name": "JAIZ Bank"
},
{
"id": 152,
"code": "050",
"name": "Ecobank Plc"
},
{
"id": 153,
"code": "307",
"name": "EcoMobile"
},
{
"id": 154,
"code": "318",
"name": "Fidelity Mobile"
},
{
"id": 155,
"code": "319",
"name": "TeasyMobile"
},
{
"id": 156,
"code": "999",
"name": "NIP Virtual Bank"
},
{
"id": 157,
"code": "320",
"name": "VTNetworks"
},
{
"id": 158,
"code": "221",
"name": "Stanbic IBTC Bank"
},
{
"id": 159,
"code": "501",
"name": "Fortis Microfinance Bank"
},
{
"id": 160,
"code": "329",
"name": "PayAttitude Online"
},
{
"id": 161,
"code": "322",
"name": "ZenithMobile"
},
{
"id": 162,
"code": "303",
"name": "ChamsMobile"
},
{
"id": 163,
"code": "403",
"name": "SafeTrust Mortgage Bank"
},
{
"id": 164,
"code": "551",
"name": "Covenant Microfinance Bank"
},
{
"id": 165,
"code": "415",
"name": "Imperial Homes Mortgage Bank"
},
{
"id": 166,
"code": "552",
"name": "NPF MicroFinance Bank"
},
{
"id": 167,
"code": "526",
"name": "Parralex"
},
{
"id": 168,
"code": "035",
"name": "Wema Bank"
},
{
"id": 169,
"code": "084",
"name": "Enterprise Bank"
},
{
"id": 170,
"code": "063",
"name": "Diamond Bank"
},
{
"id": 171,
"code": "305",
"name": "Paycom"
},
{
"id": 172,
"code": "100",
"name": "SunTrust Bank"
},
{
"id": 173,
"code": "317",
"name": "Cellulant"
},
{
"id": 174,
"code": "401",
"name": "ASO Savings and & Loans"
},
{
"id": 175,
"code": "030",
"name": "Heritage"
},
{
"id": 176,
"code": "402",
"name": "Jubilee Life Mortgage Bank"
},
{
"id": 177,
"code": "058",
"name": "GTBank Plc"
},
{
"id": 178,
"code": "032",
"name": "Union Bank"
},
{
"id": 179,
"code": "232",
"name": "Sterling Bank"
},
{
"id": 180,
"code": "076",
"name": "Skye Bank"
},
{
"id": 181,
"code": "082",
"name": "Keystone Bank"
},
{
"id": 182,
"code": "327",
"name": "Pagatech"
},
{
"id": 183,
"code": "559",
"name": "Coronation Merchant Bank"
},
{
"id": 184,
"code": "601",
"name": "FSDH"
},
{
"id": 185,
"code": "313",
"name": "Mkudi"
},
{
"id": 186,
"code": "214",
"name": "First City Monument Bank"
},
{
"id": 187,
"code": "314",
"name": "FET"
},
{
"id": 188,
"code": "523",
"name": "Trustbond"
},
{
"id": 189,
"code": "315",
"name": "GTMobile"
},
{
"id": 190,
"code": "033",
"name": "United Bank for Africa"
},
{
"id": 191,
"code": "044",
"name": "Access Bank"
},
{
"id": 567,
"code": "90115",
"name": "TCF MFB"
}
]
}
But when i put this in react native to get back the response i am getting very empty results, i do not know what is wrong and it is looking thus :
I got lost along the line. I do not seem to understand why and where i went wrong.
My code is looking thus :
import {
ImageBackground,
Modal,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {Picker} from '#react-native-picker/picker';
import React, {useEffect, useState} from 'react';
import {useNavigation} from '#react-navigation/native';
import BackgroundOpacity from './BackgroundOpacity';
const LocalPayments = ({ item }) => {
const navigation = useNavigation();
const[getBanks, setGetBanks] = useState([]);
const [bank_name, setBank_name] = useState('');
const [bank_code, setBank_code] = useState('');
const [modalVisible, setModalVisible] = useState(false);
getLocalBanks = async () => {
var url = 'https://api.flutterwave.com/v3/banks/NG';
fetch(url, {
method: 'GET',
headers: {
'Content-type': 'application/json',
'Authorization': 'Bearer FLWSECK_TEST-72fe360edef17334f4817a17407011bb-X',
},
})
.then(response => response.json())
.then(responseJson => {
setGetBanks(responseJson.data);
setBank_name(responseJson.data.name);
setBank_code(responseJson.data.code);
//setLoading(false);
});
};
useEffect(()=>{
getLocalBanks();
//console.log({getBanks})
});
showBanks = () =>{
alert({})
}
return (
<View style={styles.container}>
<BackgroundOpacity
display={Platform.OS === 'ios' ? false : modalVisible}
/>
<View style={styles.space} />
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
alignItems: 'center',
}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top: -30,
paddingTop: 95,
alignSelf: 'center',
width: 328,
height: 115,
borderadius: 9,
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<View>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
borderColor: '#00BB23',
}}>
{
<Picker
selectedValue={''}
onValueChange={(itemValue, itemIndex) => this.setState({})}
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Select Bank" value="accNum" /> //<-- Here the data should show in this picker
{item?.attributes.map((item, key) => (
<Picker.Item
label={bank_name}
value={bank_code}
key={item}
/>
))}
</Picker>
}
</View>
<View style={styles.space}/>
<TextInput
placeholder="Destination Account"
onChangeText={creditAccount => this.setState({creditAccount})}
style={styles.input}
/>
<TextInput
placeholder=" Amount"
onChangeText={amount => this.setState({amount})}
style={styles.input}
/>
<TextInput
placeholder=" Narration"
onChangeText={description => this.setState({description})}
style={styles.input}
/>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
top: 10,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Currency" value="accNum" />
<Picker.Item label="NGN" value="NGN" />
</Picker>
}
</View>
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
style={styles.button}>
<Text style={styles.loginbtn}> Transfer </Text>
</TouchableOpacity>
<Modal
hasBackdrop={true}
backdropOpacity={0.2}
backdropColor="black"
transparent
visible={modalVisible}
onRequestClose={() => setModalVisible(false)}>
<View style={styles.modal}>
<Text>Hello From Modal</Text>
<TouchableOpacity>
<Text>Modal! Modal!</Text>
</TouchableOpacity>
</View>
</Modal>
</ScrollView>
</View>
);
};
export default LocalPayments;
const styles = StyleSheet.create({
container: {
paddingTop: 40,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
modal: {
top: '50%',
height: '50%',
backgroundColor: '#fff',
},
accText: {
top: -50,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
fontSize: 12,
color: 'white',
textAlign: 'center',
},
text: {
top: -50,
fontSize: 20,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
input: {
top: 10,
width: 300,
height: 55,
margin: 10,
fontSize: 12,
borderColor: '#00BB23',
fontFamily: 'Poppins-Bold',
borderRadius: 5,
borderWidth: 1,
marginBottom: 30,
},
button: {
marginTop: 40,
width: 150,
height: 50,
padding: 10,
borderRadius: 10,
backgroundColor: '#00BB23',
alignItems: 'center',
},
Regbutton: {
width: 150,
height: 52,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
alignItems: 'center',
borderWidth: 2,
borderColor: '#030303',
},
loginbtn: {
color: '#ffff',
fontSize: 15,
fontFamily: 'Poppins-Medium',
},
AccountBalance: {
fontSize: 13,
fontWeight: 'bold',
textAlign: 'left',
},
loginbtn2: {
color: '#030303',
fontSize: 20,
fontWeight: 'bold',
},
logo: {
width: 150,
height: 150,
},
space: {
top: 10,
width: 10,
height: 20,
},
space2: {
width: 10,
height: 10,
},
imageStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 5,
margin: 2,
height: 15,
width: 15,
resizeMode: 'stretch',
marginBottom: 8,
marginTop: 8,
alignItems: 'center',
},
});
Sought the internet and i could not find something tangible. Please help.
Edit
So it gets it, but once the page loads up, it just flashes the banks,i want it to get the data into a drop down, then , from there i can select the drop down and it shows all the banks
See how the screen looks.
Source code looks thus :
import {
ImageBackground,
Modal,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {Picker} from '#react-native-picker/picker';
import React, {useEffect, useState} from 'react';
import {useNavigation} from '#react-navigation/native';
import BackgroundOpacity from './BackgroundOpacity';
const LocalPayments = ({item}) => {
const navigation = useNavigation();
const [getBanks, setGetBanks] = useState([]);
const [bank_name, setBank_name] = useState('');
const [bank_code, setBank_code] = useState('');
const [modalVisible, setModalVisible] = useState(false);
getLocalBanks = async () => {
var url = 'https://api.flutterwave.com/v3/banks/NG';
fetch(url, {
method: 'GET',
headers: {
'Content-type': 'application/json',
Authorization: 'Bearer FLWSECK_TEST-72fe360edef17334f4817a17407011bb-X',
},
})
.then(response => response.json())
.then(responseJson => {
setGetBanks(responseJson.data);
setBank_name(responseJson.data.name);
setBank_code(responseJson.data.code);
//setLoading(false);
});
};
useEffect(() => {
getLocalBanks();
//console.log({getBanks})
});
showBanks = () => {
alert({});
};
return (
<View style={styles.container}>
<BackgroundOpacity
display={Platform.OS === 'ios' ? false : modalVisible}
/>
<View style={styles.space} />
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
alignItems: 'center',
}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top: -30,
paddingTop: 95,
alignSelf: 'center',
width: 328,
height: 115,
borderadius: 9,
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<View>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
borderColor: '#00BB23',
}}>
{
<Picker
selectedValue={''}
onValueChange={(itemValue, itemIndex) => this.setState({})}
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Select Bank" value="accNum" />
{getBanks.map((bank, index) => (
<Picker.Item label={bank.name} value={bank.code} key={index} />
))}
</Picker>
}
</View>
<View style={styles.space} />
<TextInput
placeholder="Destination Account"
onChangeText={creditAccount => this.setState({creditAccount})}
style={styles.input}
/>
<TextInput
placeholder=" Amount"
onChangeText={amount => this.setState({amount})}
style={styles.input}
/>
<TextInput
placeholder=" Narration"
onChangeText={description => this.setState({description})}
style={styles.input}
/>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
top: 10,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Currency" value="accNum" />
<Picker.Item label="NGN" value="NGN" />
</Picker>
}
</View>
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
style={styles.button}>
<Text style={styles.loginbtn}> Transfer </Text>
</TouchableOpacity>
<Modal
hasBackdrop={true}
backdropOpacity={0.2}
backdropColor="black"
transparent
visible={modalVisible}
onRequestClose={() => setModalVisible(false)}>
<View style={styles.modal}>
<Text>Hello From Modal</Text>
<TouchableOpacity>
<Text>Modal! Modal!</Text>
</TouchableOpacity>
</View>
</Modal>
</ScrollView>
</View>
);
};
export default LocalPayments;
const styles = StyleSheet.create({
container: {
paddingTop: 40,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
modal: {
top: '50%',
height: '50%',
backgroundColor: '#fff',
},
accText: {
top: -50,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
fontSize: 12,
color: 'white',
textAlign: 'center',
},
text: {
top: -50,
fontSize: 20,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
input: {
top: 10,
width: 300,
height: 55,
margin: 10,
fontSize: 12,
borderColor: '#00BB23',
fontFamily: 'Poppins-Bold',
borderRadius: 5,
borderWidth: 1,
marginBottom: 30,
},
button: {
marginTop: 40,
width: 150,
height: 50,
padding: 10,
borderRadius: 10,
backgroundColor: '#00BB23',
alignItems: 'center',
},
Regbutton: {
width: 150,
height: 52,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
alignItems: 'center',
borderWidth: 2,
borderColor: '#030303',
},
loginbtn: {
color: '#ffff',
fontSize: 15,
fontFamily: 'Poppins-Medium',
},
AccountBalance: {
fontSize: 13,
fontWeight: 'bold',
textAlign: 'left',
},
loginbtn2: {
color: '#030303',
fontSize: 20,
fontWeight: 'bold',
},
logo: {
width: 150,
height: 150,
},
space: {
top: 10,
width: 10,
height: 20,
},
space2: {
width: 10,
height: 10,
},
imageStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 5,
margin: 2,
height: 15,
width: 15,
resizeMode: 'stretch',
marginBottom: 8,
marginTop: 8,
alignItems: 'center',
},
});

Answer 1

You overlook something. Try like this please.
{getBanks.map((bank, index) => (
<Picker.Item
label={bank.name}
value={bank.code}
key={index}
/>
))}
UPDATE
Define a state variable to track the selected bank
const [selectedBank, setSelectedBank] = useState();
Modify your Picker element like that
<Picker
selectedValue={selectedBank}
onValueChange={(value, index) => setSelectedBank(value)}>
{getBanks.map((bank, index) => (
<Picker.Item
label={bank.name}
value={bank.code}
key={index}
/>
))}
</Picker>