Q: Javascript arrow function not getting 'this' in its enclosing function (React Native) This is the original code. However, the 'this' inside backHandleFunc does not match it's lexical scope componentDidMount
componentDidMount() {

    this.props.getStudentList(this.props.course._id)

    const backHandleFunc = () => {
      const studentStatus = StudentStatus.getStudentStatus(this.state.selected_student)
      const aca = ActionCreators.actions

      /*Processing checkout and in signature */
      const checkinSignature = (this.props.action == aca.OPEN_SIGNATURE && studentStatus == StudentStatus.NOT_IN_NOR_OUT)

      /*in one of the three screens, Alert, Covid, Signature (checkout), go back to classDetailScreen */
      const inThreeScreens = [aca.OPEN_CONFIRM_ALERT, aca.OPEN_COVID_FORM, aca.OPEN_SIGNATURE].includes(this.props.action)

      if (checkinSignature) {
        this.props.openCovidForm();
        return true;
      } else if (inThreeScreens) {
        this.props.openClassDetailScreen();
        return true;
      }
    }

    this.backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backHandleFunc
    );
  }

but once I do, 
    this.backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backHandleFunc.bind(this)
    );

it will work. Why is that? The environment is react native vs code expo debugger. Thank you in advance. I also attach the debugger information.
 




A: So the issue is that React Native Tools extension in Visual Studio Code gives me incorrect 'this' information when I am debugging in Expo(nent). The actual 'this' in arrow function matches the 'this' in its enclosing lexical scope as expected. I find the error with this debugging software when I do console log, which gives me the correct information of 'this' in the arrow function. The crashing is logic error, and has nothing to do with the arrow function. 
