React Native - Passing Strings or Variables via onPress

Question

This probably doesn't just apply to React Native, but I do want to understand what's happening here.

Take the following 5 lines of code. Line 3 will cause the app not to render in Expo.

<Button onPress={this.filterOfficeTypePitt} title="Pitt" />
<Button onPress={this.filterOfficeTypeAtl} title="Atl" />
<Button onPress={this.filterOfficeType("pitt")} title="DOES NOT WORK" />
<Button onPress={(e) => this.filterOfficeType("pitt")} title="Pitt" />
<Button onPress={(e) => this.filterOfficeType("atl")} title="Atl" />

I somewhat understand what is going on in each line.

Line 1 and 2: Straight forward call to a method within the component.

Line 3: Trying to do the same thing and pass a value. This causes the application to crash. Reason is maximum depth exceeded.

Line 4 and 5: I think this is a function passing an anon function, and suddenly allowing me to add in a string value.

Once I used 4 and 5, I was able to use a single method and have it filter the list. When I was using 1 and 2, I had to have a unique method for each.

I just want to understand what it going on better and why exactly #3 will not work. I'm sure I need at least a better understanding of arrow functions.

Including the code for the helper function. It basically grabs data from an index array and pushes it into a FlatList component.

filterOfficeType(officetype){
  let newarray = [];
  this.state.fulldataSource.forEach((element, index) => {
    if(element.office === officetype) {
      newarray.push(element);
    }
  });
  this.setState({
    dataSource:newarray,
    office:officetype
  });
}

filterOfficeTypePitt = () => {
  this.filterOfficeType("pitt");
}
filterOfficeTypeAtl = () => {
  this.filterOfficeType("atl");
}

Answer 1

Line 3 is executing the function and trying to assign the result of that to onPress prop. It never gets there(Why? : explained below)

const Button = {
   onPress: this.filterOfficeType("pitt")
}

Note: function is being called at the creation of Button object.

whereas the other lines are assigning the function to the onPress prop

const Button = {
   onPress: this. filterOfficeTypePitt
}

or

const Button = {
   onPress: (e) => {
      this.filterOfficeType("pitt")
   }
}

Note: the function is not being called a the Button object creation rather when something presses that button

And Why Line 3 causes the application to crash is because, it triggers a state change by calling setState . When setState is called, react will call render() again. But this render() will execute the function again and this will call setState and react will call render() again and so the maximum depth exceeded and crash

The main difference between arrow functions and normal functions is the this scope. In arrow functions this refers to its parent object, where as in normal function this refers to itself. You can read more about arrow functions