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

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 ?

Answer 1

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>

  );
}

Answer 2

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>

    );
  }