I am having an issue where a variable outside of an arrow function is different than the parameter inside the arrow function.
console.log("outside", group);
return (
<TouchableOpacity style={[styles.itemContainer, { backgroundColor: group.code }]}
onPress= {group => {
console.log("inside", group);
this.navigation.navigate('GroupName',
{
screen: 'Overview',
params: {gid: group.gid}
}
)
}}
>
<Text style={styles.itemName}>{group.group_name}</Text>
</TouchableOpacity>
);
I am expecting group to be the same inside and outside the arrow function but they are different, specifically the outside group is a object with the parameters group_name, code, and gid while the inside group is a class with a bunch of weird stuff. I have included a picture of the output below.
group value outside and inside arrow function
Why are the two values printed different?
The group in onPress= {group => { defines a new variable called group that really stores information about the click event. If you change the name to event or e or similar the code will work.
console.log("outside", group);
return (
<TouchableOpacity style={[styles.itemContainer, { backgroundColor: group.code }]}
onPress= {event => {
console.log("inside", group);
this.navigation.navigate('GroupName',
{
screen: 'Overview',
params: {gid: group.gid}
}
)
}}
>
<Text style={styles.itemName}>{group.group_name}</Text>
</TouchableOpacity>
);