can not read property navigate of undefined - react-native

Question

I am mapping array to component.
{this.state.forms.map((data)=><Box data={data} />)}
and the code for component Box is
import React,{Component} from 'react'
import {View,Text,ScrollView,Image,Button,StyleSheet,AsyncStorage} from 'react-native'
class Login extends Component{
constructor(props){
super(props)
this.state = {
forms:[],
}
this.onSetCompany = this.onSetCompany.bind(this)
}
onSetCompany(data){
console.log(data)
// AsyncStorage.setItem('Company',data);
this.props.navigation.navigate('CompanyDeatails')
}
render(){
return(
<View style={style.container}>
{console.log(this.props.data)}
<View style={style.box}>
<View style={style.box1}>
<Text style={style.row2}>{this.props.data.CompanyName} bkb</Text>
</View>
<View style={style.box3}>
<Text style={style.row2}>{this.props.data.LastDate} </Text>
</View>
</View>
<View style={style.buttonBox}>
<View style={style.button}>
<Button color="#6d5d17" title="Fill" onPress={()=>this.props.navigation.navigate('CompanyDeatails')}></Button>
</View>
</View>
</View>
)
}
}
export default Login
var style = StyleSheet.create({
.....
})
and my Routes
export default class App extends Component{
render(){
return(
<Links />
)
}
}
const Links = DrawerNavigator({.....,
CompanyDeatails:{screen:CompanyDeatails},
....,
},{contentComponent:props => <Slider {...props}/>
})
When i Map array to Box then navigation in that box is not working.I have working navigation to which are working on my rest of app but not in this particular component.
Like
in login.js, I have this.props.navigation.navigate('C1')
Which is working but when I paste same line in Box component it throw error.
Can not read property navigate of undefined

Answer 1

If Box component is not part of navigator then, you should wrap it within withNavigation function inorder to access the navigation object. Take a look at the doc here
Consider the following example
import React from 'react';
import { withNavigation } from 'react-navigation';
class Box extends React.Component {
...
render() {
...
}
}
export default withNavigation(Box);
Now, within the Box component, you can access this.props.navigation.navigate function.
Hope this will help!