React-native - passing props undefined

Question

I'm trying to pass a username between two files but it remains undefined. Where am I going wrong? Thanks!

//Login file

      constructor(props){
        super(props);
        this.state={
          credentials: {
            username: "",
            password:"",

          }
        }
        this.navigate = this.props.navigation.navigate;
    }


      signIn(){
          {....}
          this.navigate("main", {
                username: this.state.username,
              });
        }

  }

In Main:

constructor(props) {
        super(props);
    this.navigate = this.props.navigation.navigate;
    this.params = this.props.navigation.state.params;
}
{...}
    render() {
    console.log(this.params.username);
    //here it's undefined

What value your are getting in `this.props.navigation.state.params`? — Prasun, Apr 30 '18 at 17:32
TypeError: undefined is not an object(evaluating this.props.navigation.state.params.username) — J. Doe, Apr 30 '18 at 17:39

score 0 · Answer 1 · answered Apr 30 '18 at 17:34

0

You are accessing the params incorrectly in Main component, you need to access from this.props.navigation.state.params, you would get it like

constructor(props) {
        super(props);
    this.navigate = this.props.navigation.navigate;
    this.params = this.props.navigation.state.params;
}
{...}
render() {
console.log(this.props.navigation.state.params.username);

answered Apr 30 '18 at 17:34

Shubham Khatri

270,417
55
406
400

I changed it to that and now I'm getting TypeError: undefined is not an object(evaluating this.props.navigation.state.params.username) – J. Doe Apr 30 '18 at 17:38
Did you bind the signIn function in Login component – Shubham Khatri Apr 30 '18 at 18:15
I'm not sure, how do I do that? – J. Doe Apr 30 '18 at 19:28
you would write, `this.signIn = this.signIn.bind(this)` in the constructor(), check this for more details https://stackoverflow.com/questions/41113798/why-and-when-do-we-need-to-bind-functions-and-eventhandlers-in-react/41113862#41113862 – Shubham Khatri May 01 '18 at 05:50

Prasun · Answer 2 · 2018-04-30T17:51:44.660

0

Use params while navigate() to pass the parameters.

this.navigate({
   routeName: 'main',
   key: 'main',
   params: { 
      username: this.state.username
   }
});

To access it use this.props.navigation.state.params.username.

Hope this will help!

edited Apr 30 '18 at 17:51

answered Apr 30 '18 at 17:44

Prasun

4,943
2
21
23

I think I have it exactly like that but I'm still getting undefined is not an object Constructor in LogIn: this.navigate = this.props.navigation.navigate;. Constructor in main: this.navigate = this.props.navigation.navigate; this.params = this.props.navigation.state.params; and then trying to print it: console.log(this.props.navigation.state.params.username); – J. Doe Apr 30 '18 at 17:56
Can you please share how you have defined the navigation? – Prasun Apr 30 '18 at 18:01
For now I have very little logic but it's a button that is connected to this function: signIn(){ if(this.state.username === undefined){ alert("Username can't be empty") } else { console.log(this.state.username) this.navigate("main", { params: { credentials: this.state.username, } }); – J. Doe Apr 30 '18 at 18:03
No no, I was asking how u have used `StackNavigator` or `TabNavigator` to define routes. – Prasun Apr 30 '18 at 18:04
const mainOptions = SwitchNavigator({ main : Main, favPlaces : favPlaces, }) const introStack = StackNavigator({ loggingIn : LoggingIn, register : Register }) const SwNavigator = SwitchNavigator({ login : introStack, main : mainOptions }) – J. Doe Apr 30 '18 at 18:14

React-native - passing props undefined

2 Answers2