"Undefined" error when passing params to another screen in React Navigation-CodePudding

I have 2 screens, EditProfile and Profile. I'm trying to pass the edited name and date from EditProfile to Profile. They are both stacked in a ProfileNavigator, Profile is the first screen that appears and from there, user can tap on a edit profile button and navigate to Edit Profile Screen. How can i pass updated Edit Screen name and date params to main profile? Following code does not work and return Cannot read property "date" of undefined:

    const EditProfileScreen = () => {
    const navigation = useNavigation();
    }
    
     return (
    ..
    <TouchableOpacity style={styles.commandButton} onPress= {() => {navigation.navigate("Profile",  {params: {date: date, name: name }})} }
        
        activeOpacity={0.5}>
              <Text style={styles.panelButtonTitle}>Submit</Text>
            </TouchableOpacity>
);

While this is the code for the Profile Screen:

    const ProfileScreen = ({route, navigation}) => {
    
      const { date } = route.params;
      const { name } = route.params;
    
      return (
    ..
    <Text>{JSON.stringify(date)}</Text>
    <Text>{JSON.stringify(name)}</Text>
)

CodePudding user response：

There is nothing wrong with your approach, but you are missing null handling for the initial render of the profile screen.

Think like this, the first time you navigate to the profile screen there wont be a route.params as you are not passing any parameters which ends up in an error.

But when you move to the edit screen and come back with parameters you will have the route.params which you can access without any issues.

So change your code like this

<Text>{JSON.stringify(route.params?.date)}</Text>
    <Text>{JSON.stringify(route.params?.name)}</Text>

Or if you have the profile object in the state of the profile screen, update it using a useEffect hook based on the change of route.params.