undefined is not an object (evaluating 'props.money')-CodePudding

can someone help me? so I'm trying to pass data from add balance components to home but I keep getting an error saying that the object is undefined. I just wanted to update the current balance which is displayed on the home screen if the user adds balance to their accounts.

function Home({ props, navigation }){
    return (
       <View style={styles.container}>
         <Text style={{fontSize:30, paddingVertical:150, fontWeight:'bold'}}>Current Balance: 
           {props.money} </Text>
         <TouchableOpacity style={styles.btnLogin1} onPress= 
           {()=>navigation.navigate("AddBalance")}>
         <Text style={styles.btnLogin}>Add Balance</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.btnLogin1} onPress= 
           {()=>navigation.navigate("Withdraw")}>
         <Text style={styles.btnLogin}>Withdraw</Text>
          </TouchableOpacity>
         <TouchableOpacity style={styles.btnLogin1} onPress= 
           {()=>navigation.navigate("ViewCode")}>
         <Text style={styles.btnLogin}>View Code To Pay</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Login")}>
         <Text style={styles.btnLogin}>Logout</Text>
           </TouchableOpacity>
      </View>
     );
     }

 const MyFunction = () => Alert.alert('Amount Added Successfully');
 function AddBalance({ navigation }){
 const[balance, newBalance] = useState(0)
 const[amount, setAmount] = useState()

 function addTogether(){
 const Total = balance   amount;
 newBalance(Total);
 MyFunction();
 }

 return (
  <View style={styles.container}>
    <Text style={{fontSize:30, paddingVertical:20, fontWeight:'bold'}}>Add Balance</Text>
    <TextInput style={styles.inputBox} placeholder="Enter Amount" keyboardType={'numeric'} onChangeText={(text) => setAmount(Number.parseInt(text))}></TextInput>
    <TouchableOpacity style={styles.btnLogin1} onPress ={addTogether}>
      <Text style={styles.btnLogin}>Continue</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home")}>
      <Text style={styles.btnLogin}>Back</Text>
    </TouchableOpacity> 
    <Home money = {balance}/>
    </View>
);

}

CodePudding user response：

Replace your Home function's parameters

function Home({ props, navigation }){...} //this

With

function Home(props){...}

Then, you can navigate with that props like props.navigation.navigate, so also replace navigation.navigate with props.navigation.navigate everywhere.

Hope this works for you.