Java script arrow function parameter error [duplicate]

Question

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?

Answer 1

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>
);