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
  }
]

CodePudding user response：

you are getting array as response thats why you are getting an error, try this code

fetch("https://webserver-migospay.onrender.com/api/userserv/getvirtualaccount/"  email,
{
method: "GET",
headers: {
  "Content-type": "application/json",
  Authorization: `Bearer ${token}`,
},
}
).then((response) => validateResponse(response));

const validateResponse = async (response) => {
var data = await response.json();
if (response.status === 200) {
setvirtualAcc(data[0]);
}
};

CodePudding user response：

==> Simply Add this line in you fetch function.

  .then(responseJson => {
          setBank_name(responseJson.bank_name)
          setvirtualAcc(responseJson);
        });

==> Update the TextInput Code.

value={bank_name}