this.function is not a function error in react native navigation

Question

I want to pass handleLogin in App.js to home.js however when I do I get the error: [TypeError: this.props.extraData.handleLogin is not a function. (In 'this.props.extraData.handleLogin(data)', 'this.props.extraData.handleLogin' is undefined)] How do I properly pass a function in stack navigator so I can use it in the props in another component? I think I'm missing something with the this context

App.js:

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      loggedInStatus: "NOT_LOGGED_IN",
      user: {}
    };
    console.log("APP PROPS", this)
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
  }


handleLogin(data) {
    this.setState({
      loggedInStatus: "LOGGED_IN",
      user: data.user
    });
  }

render() {
    return (
    <NavigationContainer>
       <Stack.Navigator>
       <Stack.Screen name="Home" >

       {props => <Home {...props} extraData={this.handleLogin}/>}
        </Stack.Screen>
        <Stack.Screen name= "Login" >
        {props =>  <Login {...props}/>}
        </Stack.Screen>
        <Stack.Screen name="Registration">
         {props =>  <Registration {...props} extraData={this.handleLogin, this.handleLogout, this.loggedInStatus}/>}

         </Stack.Screen>
       </Stack.Navigator>
     </NavigationContainer>
    );
  }
}

Home.js:

export default class Home extends Component {
  constructor(props) {
    super(props);
    console.log("HOME PROPS", this.props)
    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  handleSuccessfulAuth(data) {
    this.props.extraData.handleLogin(data);
    this.props.history.push("/dashboard");
  }

Have you defined handleLogin? You haven't in the code you provided. — samuei
– samuei, Commented Mar 18, 2021 at 5:21

Drew Reese · Accepted Answer · 2021-03-18 05:44:21Z

1

Seems you failed to pass a proper extraData prop object. The object should have keys that match the values you pass, i.e. for this.props.extraData.handleLogin the extraData object should have a handleLogin property.

<Stack.Screen name="Home" >
  {props => (
    <Home
      {...props}
      extraData={{ handleLogin: this.handleLogin }}
    />
  )}
</Stack.Screen>
...
<Stack.Screen name="Registration">
  {props =>  (
    <Registration
      {...props}
      extraData={{
        handleLogin: this.handleLogin,
        handleLogout: this.handleLogout,
        loggedInStatus: this.loggedInStatus,
      }}
    />
  )}
</Stack.Screen>

NOTE: Missing from your App component snippet are these function definitions, so make sure those are all defined.

answered Mar 18, 2021 at 5:44

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amon Over a year ago

Hey thank you! This worked, didn't even realize I was passing them wrong, I was treating the value I passed as a dictionary

Bera Koç · Accepted Answer · 2021-03-18 05:45:29Z

1

You are sending props wrong:

App.js

<Stack.Screen name="Registration">
  {(props) => (
    <Registration
      {...props}
      extraData={{
        handleLogin: this.handleLogin,
        handleLogout: this.handleLogout,
        loggedInStatus: this.loggedInStatus,
      }}
    />
  )}
</Stack.Screen>;

Also be sure you have defined those functions that you are sending to Home.js are defined in App.js.

answered Mar 18, 2021 at 5:45

Bera Koç

4265 silver badges12 bronze badges

Collectives™ on Stack Overflow

this.function is not a function error in react native navigation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related