Call this.props in function outside render gives undefine - react-native

Question

Im having this problem with my flatlist. Basically im destructing my code to make it more readable. However my problem whenever I call the this.props outside the render it gives my undefine. Here's my code below:
renderItem(item) {
console.log(this.props) // Gives me undefine
return (
<ListItem button>
<Text>{item.item.name }</Text>
</ListItem>
)
}
render() {
return (
<FlatList
keyboardShouldPersistTaps={'always'}
data={countries.payload.data}
renderItem={this.renderItem}
keyExtractor={item => item.name}
/>
)
}
But if I did not separate to other function the renderItem. I can access the this.props:
render() {
return (
<FlatList
keyboardShouldPersistTaps={'always'}
data={countries.payload.data}
renderItem={({item, index}) => (
<ListItem button onPress={() => this.props.onPressAction()}> // I get the correct value
<Text>{item.name }</Text>
</ListItem>
)}
keyExtractor={item => item.name}
/>
)
}

Answer 1

When using react-native and ES6 classes it won't automatically bind your functions that is declared on your classes, so this will be a live object represent for the unknown context or even undefined which caused this.props to be undefined.
We need to handle the correct value of this to our methods on our own. Therefore either use:
Change to this.renderItem.bind(this)
Or use arrow functions like renderItem= () => {}