react navigator issue for undefined this.props.navigation.navigate

Question

my head is crack up now with this navigation, i watched several videos about this and follow them but still hitting the same error of undefined is not an object error for this.props.navigation.navigate

here is my code basically

App.js

import React from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';
import { createStackNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

import Home from './Home';
import Details from './Details';

export default createStackNavigator(
 {
Home: {
  screen: Home
},
Details: {
  screen: Details
}
}, 
{
initialRouteName: 'Home',
}
);

Here is my Home.js

import React, { Component } from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';

class Home extends Component {
 constructor(){
super();
this.state = {
  data: []
};
}

getData(){
return fetch('https://testdata.com')
.then((response) => response.json())
.then((responseJson) => {
  console.log(JSON.stringify(responseJson.result));
    this.setState({data:responseJson.result});
    //alert(responseJson.result[1].name);
    //return responseJson.result[1].name;
})
.catch((error) => {
  console.error(error);
});
 }
componentDidMount(){
this.getData();
 }
  static navigationOptions = ({navigation}) => {
    const {state, navigate} = navigation;
    return {
        title: "test",
         headerStyle: {
          backgroundColor: '#4050B5',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold'
},
    };
 };



  render() {
 let yytCardData = this.state.data.map(function(cardData, i){
  return (
        <ListItem key={cardData.ver}>
          <Left>
            <Text>{cardData.name}</Text>
          </Left>
          <Right>
            <Icon name="arrow-forward" />
           <Button transparent info onPress={() => this.props.navigation.navigate('Details')}>
        <Text>Info</Text>
      </Button>
          </Right>
        </ListItem>
  )
});

return (
  <Container>
  <Content>
      <List>
        {yytCardData}
      </List>
    </Content>
    <Footer>
      <FooterTab>
        <Button vertical active>
          <Icon name="apps" />
          <Text>Title List</Text>
        </Button>
        <Button vertical>
          <Icon name="search" />
          <Text>Search</Text>
        </Button>
      </FooterTab>
    </Footer>
  </Container>
);
  }
  }
  export default Home

and a very empty Details.js

  import React, { Component } from 'react';
  import { Container, Header, Content, List, ListItem, Text, Left, Right, Icon } from 'native-base';

  class Details extends Component {

  render() {

      return(
  <Container>
    <Header />
    <Content padder>
      <Card transparent>
        <CardItem>
          <Body>
            <Text>
              This is just a transparent card with some text to boot.
            </Text>
          </Body>
        </CardItem>
      </Card>
    </Content>
  </Container>
    );
   }
  }
   export default Details;

i am not sure which part is incorrect in this case but doing just a simple navigation sounds very complex

what is the actual error?

Hemadri Dasari
– Hemadri Dasari

2018-08-17 16:47:15 +00:00
Commented Aug 17, 2018 at 16:47 — Hemadri Dasari
– Hemadri Dasari, Commented Aug 17, 2018 at 16:47

Pritish Vaidya · Accepted Answer · 2018-08-17 16:48:41Z

2

You need to bind your function using the arrow function in your render method.

let yytCardData = this.state.data.map((cardData, i) => { // Replace function with arrow function

answered Aug 17, 2018 at 16:48

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

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

Comments

Hemadri Dasari · Accepted Answer · 2018-08-17 16:52:11Z

2

The issue is with scope in Home component this.state.data.map(function(cardData, i){. If you don't want to use arrow function then you can use the same function but just assigning this to a local variable and use that

let yytCardData = this.state.data.map(function(cardData, i){
let that = this;
  return (
        <ListItem key={cardData.ver}>
          <Left>
            <Text>{cardData.name}</Text>
          </Left>
          <Right>
            <Icon name="arrow-forward" />
           <Button transparent info onPress={() => that.props.navigation.navigate('Details')}>
        <Text>Info</Text>
      </Button>
          </Right>
        </ListItem>
  )
});

If you want to use arrow function then follow what Pritish Vaidya mentioned

answered Aug 17, 2018 at 16:52

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

4 Comments

Hemadri Dasari Over a year ago

Kindly accept If you feel the answer resolves your issue provided by either me or others

mcssym Over a year ago

I think you have to put let that = this outside the function.

Hemadri Dasari Over a year ago

It has a block level scope. How will that work if I move that outside the function. When we use es5 normal function in order to have scope available we need to depend on with local variable

mcssym Over a year ago

The problem is that this way this represents the function not the class but if it is outside that will be like a global variable and will represent the class. Another way would be to use .bind(this) after the function to connect the scope of the function to the scope of the class.

Collectives™ on Stack Overflow

react navigator issue for undefined this.props.navigation.navigate

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related