Cannot update a component from inside the function body of a different component ,navigate problem

Question

my adminhomepage

export default function AdminHP(props) {

return (
    
       <View style={styles.container}>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
  <View style={styles.Button}>
        <Button title="Add / Delete products"  onPress={   props.navigation.navigate("addproduct")}/>
  </View>
     <View style={styles.Button}>
       <Button title="Check product list"   />
</View>
    </ImageBackground>
    </View>
)

}

the app.js export default class App extends Component {

render() {

return (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Login" >
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="AdminHP" component={AdminHP} />
      <Stack.Screen name="UserHP" component={UserHP} />
      <Stack.Screen name="addproduct" component={addproduct} />
    </Stack.Navigator>
  </NavigationContainer>
);

} }

Answer 1

This has been answered before but in your onPress attribute of your button you should use an arrow function like so.

<Button title="Add / Delete products"  
        onPress={ () => { props.navigation.navigate("addproduct")} }
/>