Getting $NaN

[DwsCode88]

So i have a default placeholder im using and then i set state back to null instead of showing the placeholder it shoes $NaN

[CaioQuirinoMedeiros]

@DwsCode88 Could you please explain it better? I just couldn't understand. Showing some code will also help

[DwsCode88]

`import React, {useEffect, useRef, useState} from 'react'; import { View, Text, SafeAreaView, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, StatusBar, AppState, Button, Image, Linking, TextInput, Keyboard, Alert, } from 'react-native'; import CurrencyInput from 'react-native-currency-input'; import {API, graphqlOperation, Auth, Amplify} from 'aws-amplify'; import {globleStyles} from './global'; import {getCar, getUser} from '../../graphql/queries'; import {Root, Popup} from 'popup-ui'; import ReactNativeForegroundService from '@supersami/rn-foreground-service'; import RNLocation from 'react-native-location'; import Geolocation from 'react-native-geolocation-service'; import * as TaskManager from 'expo-task-manager'; import * as Location from 'expo-location'; import { checkBalance, createloginlink, instantpayout, transferfunds, updateCar, } from '../../graphql/mutations'; import {Logger} from 'aws-amplify'; Amplify.Logger.LOG_LEVEL = 'DEBUG'; import BackgroundTimer from 'react-native-background-timer'; import NotificationSounds, { playSampleSound, stopSampleSound, } from 'react-native-notification-sounds';

const logger = new Logger('foo', 'INFO');

const ManageMoney = ({route, navigation}) => { const appState = useRef(AppState.currentState); const [appStateVisible, setAppStateVisible] = useState(appState.current); const item = route.params; console.log('DriverDetails', item); const [car, setCar] = useState(null); const [name, setName] = useState(null); const [pendingBal, setPendingBal] = useState(null); const [availableBal, setAvailableBal] = useState(null); const [loginurl, setLoginURL] = useState(null); const [shouldShow, setShouldShow] = useState(true); const [modalVisible, setModalVisible] = useState(false); const [payoutStatus, setPayOutStatus] = useState(false);

const [number, onChangeNumber] = React.useState(null);

useEffect(() => { Auth.currentUserInfo() .then(res => { console.log(res); setName(res.attributes['custom:Name']); }) .catch(err => { console.error(err); }); }, []);

useEffect(() => { const fetchCar = async () => { try { const userData = await Auth.currentAuthenticatedUser(); const carData = await API.graphql( graphqlOperation(getCar, {id: userData.attributes.sub}), ); setCar(carData.data.getCar); console.log(carData); } catch (e) { console.error(e); } }; fetchCar(); }, [name]);

const instant = async () => { const response = await API.graphql( graphqlOperation(instantpayout, { driverPayAcct: car.driverPayAcct, driverpay: number * 100, }), ); console.log('stripe data', response); console.warn(response); setPayOutStatus(response.data.instantpayout.returninfo); console.warn('Instant', payoutStatus); if (payoutStatus) { return Alert.alert('Payout', 'Your pay out has been processed.', [ // The "Yes" button { text: 'Okay', onPress: () => { onChangeNumber({ ...null, }); CheckBalance(); }, }, // The "No" button // Does nothing but dismiss the dialog when tapped2.00 ]); } };

useEffect(() => { CheckBalance(); }, [car]);

const CheckBalance = async () => { const response = await API.graphql( graphqlOperation(checkBalance, { driverPayAcct: car.driverPayAcct, }), ); console.log('stripe data', response); setAvailableBal(response.data.CheckBalance.availableBal); setPendingBal(response.data.CheckBalance.pendingBal); };

const LoginLink = async () => { const response = await API.graphql( graphqlOperation(createloginlink, { driverPayAcct: car.driverPayAcct, }), ); console.log('stripe data', response); setLoginURL(response.data.createloginlink.url); };

useEffect(() => { LoginLink(); }, [car]);

console.log('LoginLink', loginurl);

const Bal = Max amount you can transfer out $${availableBal / 100}; console.log(number); return ( <View style={globleStyles.container}> <Text>Your Available Balance to withdraw</Text> <Text>${availableBal / 100}</Text> <Text>Current Pending Balance is $ {pendingBal / 100}</Text>

  <TextInput
    style={styles.input}
    onChangeText={onChangeNumber}
    value={number}
    placeholder={Bal}
    keyboardType="numeric"
    onBlur={Keyboard.dismiss}
  />
  <CurrencyInput
    value={number}
    style={styles.input}
    onChangeValue={onChangeNumber}
    prefix="$"
    delimiter=","
    separator="."
    precision={2}
    placeholder={Bal}
    keyboardType="numeric"
    onBlur={Keyboard.dismiss}
    onChangeText={formattedValue => {
      console.log(formattedValue); // $2,310.46
    }}
  />
  <View style={styles.inputContainer}>
    <TouchableOpacity style={styles.saveButton} onPress={instant}>
      <Text style={styles.saveButtonText}>PayOut</Text>
    </TouchableOpacity>
  </View>
  <Text>{AppState.currentState}</Text>
  <Button
    onPress={LoginLink}
    title="Generate login link"
    color="#841584"
    accessibilityLabel="Creates a link to your dashboard"
  />
  <View style={styles.container}>
    {/*Here we will return the view when state is true
    and will return false if state is false*/}
    {shouldShow ? (
      <Button
        onPress={() => Linking.openURL(loginurl)}
        title="Open DashBoard"
        color="#841584"
        accessibilityLabel="Creates a link to your dashboard"
      />
    ) : null}
    <Button
      title="Hide/Show Component"
      onPress={() => setShouldShow(!shouldShow)}
    />
  </View>
</View>

); };

const styles = StyleSheet.create({ container: { flex: 1, padding: 7, marginTop: StatusBar.currentHeight, }, TextStyle: { color: '#E91E63', textDecorationLine: 'underline', }, input: { height: 40, margin: 12, borderWidth: 1, padding: 10, }, inputContainer: { paddingTop: 15, }, textInput: { borderColor: '#CCCCCC', borderTopWidth: 1, borderBottomWidth: 1, height: 50, fontSize: 25, paddingLeft: 20, paddingRight: 20, }, saveButton: { borderWidth: 1, borderColor: '#007BFF', backgroundColor: '#007BFF', padding: 15, margin: 5, }, saveButtonText: { color: '#FFFFFF', fontSize: 20, textAlign: 'center', }, });

export default ManageMoney; `

[DwsCode88]

When I reset the state it shows $NaN Instead of placeholder like on first load

[CaioQuirinoMedeiros]

@DwsCode88 if you want help you need to make us understand the problem, this code you shared is illegible an unreproducible (we can't run it)