how to pass navigation prop to map(function()) of array? [duplicate]

Question

Getting

undefined is not an object (evaluating '_this3.props.navigation')

error while click on TouchableOpacity.

render() {
     List = this.state.availableList.map(function(demo){
     return(
       <View key={(exam, index) => index.toString()} >
         <TouchableOpacity 
           onPress={() => this.props.navigation.navigate('BCD')} >
           <View>
             <Text>{demo.Name}</Text>
             <Text>{demo.Address}</Text>
           </View>
         </TouchableOpacity>
       </View>
     );
   });
  return (
<View>
{List}
</View>

    );
  }

in map(function()) this.props.navigation not getting so my question is how to pass props ?

this.state.availableList.map((demo) => {

Mayank Shukla
– Mayank Shukla

2018-07-18 05:23:50 +00:00
Commented Jul 18, 2018 at 5:23 — Mayank Shukla
– Mayank Shukla, Commented Jul 18, 2018 at 5:23

John Ruddell · Accepted Answer · 2018-07-18 05:38:30Z

2

you should use an arrow function for your map

this.state.availableList.map( (demo) => {

applied to your render

const { availableList } = this.state
return (
  <View>
    availableList.map( (demo) => {
    return(
        <View key={(exam, index) => index.toString()} >
          <TouchableOpacity onPress={() => this.props.navigation.navigate('BCD')} >
            <View>
              <Text>{demo.Name}</Text>
              <Text>{demo.Address}</Text>
            </View>
          </TouchableOpacity>
        </View>
      );
    })}
  </View>

  );
}

edited Jul 18, 2018 at 5:38

answered Jul 18, 2018 at 5:24

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

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

Comments

Harikrishnan · Accepted Answer · 2018-07-18 05:25:13Z

1

I think its better to use arrow funtion in the map as shown below.

render() {
     List = this.state.availableList.map(demo =>{
     return(
       <View key={(exam, index) => index.toString()} >
         <TouchableOpacity 
           onPress={() => this.props.navigation.navigate('BCD')} >
           <View>
             <Text>{demo.Name}</Text>
             <Text>{demo.Address}</Text>
           </View>
         </TouchableOpacity>
       </View>
     );
   });
  return (
<View>
{List}
</View>

    );
  }

answered Jul 18, 2018 at 5:25

Harikrishnan

1,0978 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to pass navigation prop to map(function()) of array? [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related