FlatList rendeItem component doesn't recognize `this` keyword - react-native

Question

I have to call a function inside the renderItem function that is called for each item in a FlatList's data. The function will come from the component it comes from and uses a little of the component's state, however, it always returns an error that the method is undefined when it comes to getting that method or, for that matter, the data in the component's state.
Here's the method and how the FlatList looks like
renderItem({ item, index }) {
return (
<TouchableOpacity onPress={() => {this.goToStaffMemberPage(item.id)} }>
<View style={GenericStyles.styles.genericCard}>
<Text style={GenericStyles.styles.genericCardTitle}> {item.first_name.toUpperCase() + " " + item.last_name.toUpperCase()} </Text>
<Text style={GenericStyles.styles.genericCardDescription}> {item.role_name.toUpperCase()} </Text>
</View>
</TouchableOpacity>
);
}
<FlatList
data={this.state.staffList}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItem}
contentContainerStyle={GenericStyles.styles.genericContainer}
/>

Answer 1

That's because you are not giving it access to this. You can either bind it (preferability in the constructor) doing:
constructor(props){
super(props);
this.renderItem.bind(this);
}
or using arrow function directly when you define renderItem:
renderItem = ({ item, index }) => {
return (
<TouchableOpacity onPress={() => {this.goToStaffMemberPage(item.id)} }>
<View style={GenericStyles.styles.genericCard}>
<Text style={GenericStyles.styles.genericCardTitle}> {item.first_name.toUpperCase() + " " + item.last_name.toUpperCase()} </Text>
<Text style={GenericStyles.styles.genericCardDescription}> {item.role_name.toUpperCase()} </Text>
</View>
</TouchableOpacity>
);
}