React Native Axios fetching data from url error

Question

import React, { Component } from 'react'

import { SafeAreaView, StyleSheet, StatusBar, ScrollView, View, Text, TextInput, Button, Alert } from 'react-native';

import axios from 'axios';

export default class Main extends Component { constructor(props){ super(props) this.state={ ifscCode:"", detail:{} } }

  ifscSearch = () => {
    const tha = this;
    x = `https://ifsc.razorpay.com/${this.state.ifscCode}`
    console.log(x);
  axios.get(`https://ifsc.razorpay.com/${this.state.ifscCode}`)
    .then(function (response) {
    tha.setState({detail:response.data})
    console.log(response);
     })

    .catch(function (error) {
     // handle error
     console.log(error);
     })
    .then(function () {
     // always executed
     });
    }


render() {
    return (
        <>
        <StatusBar barStyle="light-content" />
        <SafeAreaView>
            <ScrollView>
                <View style={styles.maincnt}>

                    <View style={styles.inpcnt}>
                    <TextInput style={styles.txtinp} maxLength={11} placeholder='ifsc code search' onChange={(e)=>this.setState({ifscCode:e.target.value})} />
                    </View>

                    <View style={styles.btncnt}>
                        <Button title='Search' style={styles.btn} onClick={this.ifscSearch()} />
                    </View>

                    <View style={styles.listcnt}>
                        <Text>BANK: {this.state.detail.BANK}</Text>
                    </View>
                    <View>
                        
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
        </>
    )
}

}

const styles = StyleSheet.create({ maincnt:{ flex:1, margin: 10, backgroundColor: 'white' }, inpcnt:{ marginTop: 20, }, btncnt:{ marginTop: 20, }, listcnt:{ marginTop: 20 }, txtinp:{ width: 350, height: 50, borderRadius: 25, borderWidth: 2, borderColor: 'indigo', alignSelf: 'center', padding: 10 }, btn:{ width: 100, height: 70, alignSelf: 'center' }, listcnt:{ marginTop: 50, alignContent: 'center', justifyContent: 'center' }

});

Answer 1

You are having an error here

onClick={this.ifscSearch()}

please check out the below link to solve this issue. https://stackoverflow.com/a/66149805/10562665

Also I see a little type error here as well

tha.setState({detail:response.data})

change tha to this

Please tell us more in details what you actually need.