Question 33931 in React native Question posted in
The official React Native documentation can be found here.

props.route.params.name is undefined (React Native Functional Component)

I am sending an object as params. But when I try to access the params in another screen. It says undefined.

Screen 1:

<TouchableOpacity
        onPress={() => {
          navigation.navigate('DraggableList', {
           routes: ['A', 'B', 'C'],
           name: 'ABCD',
         });
       }}
                                      
</TouchableOpacity>

Screen 2:

  console.log('Props==============>', props.route.params);

Output:

Output of the above image

But when I try to access the variables of the object:

Screen 2: 

  console.log('Props==============>', props.route.params.name);

Output:
Output of the above code

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I actually just added a '?' like this,

    console.log('Props==============>', props.route.params?.name)

    And it worked! Turns out there is a slight delay for variables to reach the component and my component was accessing it before it was available.


  2. 0

    as you can see props ====> ABCD, it already logged params.name
    and I think the problem is with type-checking,
    params have no type

    try this:

    const {name} = props.route.params as {name:string}
console.log("Props=======>",name)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search