How to pass parameters to a component in another screen in Stack Navigation in react-native?

Question

I have an index page where there is a list of users , if user clicks on each user it goes to their profile screen , I can pass the id to render the profile screen but the problem is the profile page is made of several components , and I need that received data to be used in components.

Here is how I pass the data to user's profile:

onPress={() => this.props.navigation.navigate('userProfile',{item})}>

Here is how I receive it in userProfile :

    export default class UserProfileScreen extends React.Component {

      render() {
        const {item} = this.props.navigation.state.params;
        return (
          <ScrollView>
            <View style={styles.container}>
              <IntroCard item={item}/>
            </View>
          </ScrollView>
}
}

and this is how I receive data in <IntroCard> component:

const IntroCard = (props) => {
  return (
    <View>
       <Text>{this.props.item ? this.props.item.id : 'default'}</Text>
    </View>
)}

But after doing all of these I get the following error:

TypeError: TypeError: TypeError: undefined is not an object (evaluating '_this.props.item')

Possible duplicate of [Pass Data between Pages in React native](https://stackoverflow.com/questions/50098376/pass-data-between-pages-in-react-native) — Andrew, Mar 12 '19 at 08:34

score 0 · Accepted Answer · edited Mar 12 '19 at 09:47

0

You can pass it as a prop to the components

render(){
  const {item} = this.props.navigation.state.params;
  return (
    <View>
      <Component item={item}/>
    </View>
  )
}

then access it with this.props on Component

<Text>{props.item ? props.item.id : 'print something else'}</Text>

edited Mar 12 '19 at 09:47

hesam sameni

131
3
16

answered Mar 12 '19 at 07:06

wicky

948
6
13

1

Be careful that params may be undefined – zhou Dai Mar 12 '19 at 07:18
Thanks alot. How can I define them in the component ? – hesam sameni Mar 12 '19 at 07:28
updated my answer, you can do a check whenever you want to use `this.props.item` – wicky Mar 12 '19 at 07:34
Or if you think a default value is better, you can also use `defaultProps`. Checkout this [SO answer](https://stackoverflow.com/a/45634831/2963461) – wicky Mar 12 '19 at 07:37
Sorry to bother but I still get this error: TypeError: undefined is not an object (evaluating '_this.props.item') – hesam sameni Mar 12 '19 at 07:44
Can you look for which part of your code is causing the error from the error log, and update the code in you question so we can help you with it? :) – wicky Mar 12 '19 at 07:59
try with `props.item` instead of `this.props.item` – wicky Mar 12 '19 at 08:28

How to pass parameters to a component in another screen in Stack Navigation in react-native?

1 Answers1