I have a component that takes an object and passes it to a new screen upon navigating to the screen. However, when I go to the next screen the object passed is undefined. What am I doing wrong here? I have done the exact same thing with another component and it works perfectly fine, but on this component, it isn't passing the parameter properly. Is there something else I need to configure in the navigator?

GoalCard.JS

import * as React from 'react';

import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

import { useNavigation } from "@react-navigation/core";
import { Card, Chip, Divider, Paragraph, Text, Title } from 'react-native-paper';

const GoalCard = ({ item }) => {

    const navigation = useNavigation();
    const goals = JSON.parse(item.Goals);
    const tasks = JSON.parse(item.GoalTasks);
    const [goalsData, setGoalsData] = React.useState(
        {
            GoalName: item.GoalName,
            GoalID: item.GoalID,
            GoalDescription: item.GoalDescription,
            GoalComplete: item.GoalComplete,
            GoalTasks: tasks,
            Goals: goals,
            UserID: item.UserID,
            createdAt: item.createdAt,
            updatedAt: item.updatedAt
        }
    );
    
    
    return(
        <Card className="card">
            <Card.Content>
                <Title>Goal Set: {item.GoalName}</Title>
                <Divider/>
                <Paragraph>
                    <Chip
                        onPress={() => {
                            navigation.navigate(
                                'Goals', {
                                    goalsData: goalsData
                                });
                            }}
                    >
                    Edit
                    </Chip>
                    <Text onPress={() => console.log(goalsData)}>Log</Text>
                    <Text>Description: {item.GoalDescription}</Text>
                    <Divider/>
                    {Object.entries(goals).map(obj => (
                        <Text key={uuidv4()}>{obj[1].goal}{" "}</Text>
                    ))}
                </Paragraph>
            </Card.Content>
        </Card>
    );
}

export default GoalCard;

GoalScreen.js

Pressing "Log" as seen in this file returns undefined

import React from "react";

import { ScrollView, View } from "react-native";
import { Text } from "react-native-paper";

import { MainStyles } from "../../styles/Styles";

const GoalScreen = ({ route }) => {
    const { goalData } = route.params;

    return (
        <ScrollView>
            <View style={MainStyles.col}>
                <Text onPress={() => console.log(goalData)}>Log</Text>
            </View>
        </ScrollView>
    );
};

export default GoalScreen;

CodePudding user response：

There is a typo ... You are setting

goalsData: goalsData

But you are trying to read as below

const { goalData } = route.params;

try

const { goalsData } = route.params;