Is there a way to make an onpress navigation inside a result of a array map in react-native? - react-native

Question

I have a simple array of names in this.state.members. I used the map function to iterate the members.
I want to add a button for each member so, when i click to them, i go to a screen dedicated to each member.
I test the button outise the loop, it is working.
But for those inside the map function, its says "undefined is not an object (evaluating '_this2.props.navigation')
onPress"
i spent a whole day trying to understand what is going on without any luck.
Any help will be appreciated.
Here is my code
import { StyleSheet, Text, View } from "react-native";
import { ListItem, Button } from "react-native-elements";
export default class ProfileScreen extends React.Component {
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
this.state = {
members: ["Allie", "Gator", "Lizzie"],
id_groupe: "",
groupe: ""
};
// this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
const members = this.state.members;
const namesList = members.map(function(name, i) {
return (
<Button
onPress={() => this.props.navigation.navigate("Home")}
title={name}
key={i}
/>
);
});
return (
<View style={styles.container}>
<View>{namesList}</View>
<View>
<Button
title="Back to home"
onPress={() => this.props.navigation.navigate("Home")}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});

Answer 1

just use an arrow function, and you will not have the this issue. But not sure about your actual problem, if the arrow function works let's check if you have any other issue.
Arrow function when you iterate with map:
const namesList = members.map((name, i) => {
return (
<Button
onPress={() => this.props.navigation.navigate("Home")}
title={name}
key={i}
/>
);
});