I want to get the value of something from a REST api and display in a Textbox in React native. So far i am not getting it to the textbox and secondly it returns this Error
My source Code is looking thus
import { Button, Image, ImageBackground, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Icon } from '@rneui/base'
const VirtualAccount = () => {
const [virtualAcc, setvirtualAcc] = useState();
const [account_number, setAccount_number] = useState("");
const [bank_name, setBank_name] = useState("");
sayAlert = () =>{
alert('Text copy button is active');
}
getVirtualAccount = async () => {
let token = await AsyncStorage.getItem('token');
let email = await AsyncStorage.getItem('email');
fetch(
'https://webserver-migospay.onrender.com/api/user-serv/get-virtual-account/'+email,
{
method: 'GET',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${token}`,
},
},
)
.then(response => response.json())
.then(responseJson => {
setvirtualAcc(responseJson);
});
};
useEffect(() => {
//showdata();
getVirtualAccount();
});
return (
<View style={{top:30}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top:15,
paddingTop:95,
alignSelf:'center',
width: 328,
height: 145,
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>
<Text
style={{
fontFamily: 'Poppins-Bold',
flexDirection: 'row',
paddingTop:55,
fontSize: 15,
left: 25,
color: 'gray',
}}>
Your Virtual Account
</Text>
<View>
<View style={{flexDirection:'row', alignSelf:'center',justifyContent:'center'}}>
<TextInput
placeholder=" Bank Name"
onChangeText={text => setBank_name(text)}
value={virtualAcc.bank_name}
style={styles.input}
/>
<TouchableOpacity onPress={()=>sayAlert()}>
<Image source={{uri:'asset:/logo/copy-image2.png'}} style={{height:30,width:30,left:-40, top:20}}/>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row',alignSelf:'center',justifyContent:'center'}}>
<TextInput
placeholder=" Account Number"
onChangeText={text => setAccount_number(text)}
value={virtualAcc.account_number}
style={styles.input}
/>
<TouchableOpacity onPress={()=>sayAlert()}>
<Image source={{uri:'asset:/logo/copy-image2.png'}} style={{height:30,alignSelf:'center',width:30,left:-40, top:20}}/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
}
export default VirtualAccount
const styles = StyleSheet.create({
shadowProp:{
shadowOffset: {width: -2, height: 4},
shadowColor: '#171717',
shadowOpacity: 0.2,
shadowRadius: 3,
},
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
date_ofTransaction: {
marginTop: 20,
alignItems:'flex-start',
alignItems:'center',
left: -75,
fontFamily: 'Poppins-Light',
fontSize:9
},
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
padding: 20,
},
text: {
top: -85,
fontSize: 30,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
mainContainer: {
paddingTop: 90,
justifyContent: 'center',
alignItems: 'center',
},
accText: {
top: -85,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
color: 'white',
textAlign: 'center',
},
PayeeName: {
justifyContent: 'flex-start',
alignItems:'center',
left: 23,
fontFamily: 'Poppins-Medium',
size: 800,
fontWeight:'bold'
},
amountValue: {
alignSelf:'flex-end',
top : -30,
right: -25,
fontFamily: 'Poppins-Medium',
size: 800,
fontWeight:'bold'
},
input:{
width:300,
height:55,
margin:10,
fontFamily : 'Poppins-Medium',
fontSize : 15,
borderBottomColor:'#00BB23',
borderBottomWidth: 1,
marginBottom: 30
},
})
Checked all over the internet, I could not find something valuable. or what exactly must I do? Does it appear to be something I am missing?
Edits
Please see the data it gets back from JSon
[
{
"_id": "63a21a3d3b6777ba42d0f0db",
"email": "[email protected]",
"account_number": "0123456789",
"bank_name": "WEMA BANK",
"created_at": "2022-12-20T20:05:19.491Z",
"__v": 0
}
]
2
Answers
==> Simply Add this line in you
fetch
function.==> Update the TextInput Code.
you are getting array as response thats why you are getting an error, try this code