this is my code actually I get user login details recharge from laravel api. this code is working fine if I use it without class component but my app has bottom navigation and i am bound to write this code in class component. Needs suggestions how to achieve this kind of functionality or if it's impossible to use React$Node and class component together then give me some suggestions how to do this kind of functionality within the class.
export default class Together extends React.Component { App: () => React$Node = () => { const [mtag_id,setmtag_id] = useState(); validateUser = async()=>{ await fetch('http://server_ip/api/v1/user/login' ,{ method:'POST', headers:{'Accept': 'application/json', //'Content-Type': 'application/x-www-form-urlencoded''Content-Type': 'application/json' }, body: JSON.stringify({"email":'abc@yahoo.com',"password": 'abc123'}), }).then(loginres => loginres.json()) .then(loginresData =>{ //alert(resData.token); if(loginresData.status == '200') { //alert('OK') //alert(resData.token) //////////////////////start getInfo api//////////////////////////////// fetch('http://server_ip/api/v1/recharge/getInfo' ,{ method:'POST', headers:{'Accept': 'application/json', //'Content-Type': 'application/x-www-form-urlencoded''Content-Type': 'application/json','Authorization': loginresData.token, }, body: JSON.stringify({"mtag_id": mtag_id}), }).then(infores => infores.json()) .then(inforesData=> { //this.props.navigation.navigate("recharge") if(inforesData.status == '200'){ //alert('OK') //this.props.navigation.navigate("recharge") ///////////////recharge api start//////////////////////// fetch('http://server_ip/api/v1/recharge/account',{ method:'POST', headers:{'Accept': 'application/json', //'Content-Type': 'application/x-www-form-urlencoded''Content-Type': 'application/json','Authorization': loginresData.token, }, body: JSON.stringify({"mtag_id": mtag_id , "amount": '299'}), }).then(rechargeres => rechargeres.json()) .then(rechargeresData =>{ if(rechargeresData.status == '200'){ alert(rechargeresData.msg) } else{ alert(rechargeresData.status) } ////////////////recharge api end////////////////////// console.log(rechargeresData) }); } else{ alert(inforesData.status) } console.log(inforesData); }); } //////////////////////////////////end getInfo api/////////////////////////// ///////login else//////// else { alert(loginresData.status); } console.log(loginresData); }); } } render(){ return (<Container><Content><Header><Title> Smart Motorway</Title></Header><CardItem header><Text style ={styles.heading}>M-Tag Recharge</Text></CardItem><CardItem><Input placeholder = "M-Tag ID" style={styles.input} value = {mtag_id} onChangeText={(value) => setmtag_id(value)} /></CardItem><CardItem><Body><Button primary block onPress = {validateUser}><Text style = {styles.btn}>Recharge</Text></Button></Body></CardItem></Content></Container> ); } }