Within React, why am I not able to use nested arrow functions... Altough normal functions seem to work?

user_3534132 0
Viewed 80

The following doesn't work.

generateFakeAnswer = () => {
    getRealAnswer = (state) => {
      return state.valueOne + state.valueTwo + state.valueThree;
    }

    this.setState({
      fakeAnswer: Math.floor(Math.random() * 10) + getRealAnswer(this.state)
    })
  }

But the following does work.

generateFakeAnswer = () => {
    function getRealAnswer(state) {
      return state.valueOne + state.valueTwo + state.valueThree;
    }

    this.setState({
      fakeAnswer: Math.floor(Math.random() * 10) + getRealAnswer(this.state)
    })
  }

Am I doing something wrong?

reactjs ecmascript-6
1 Answers

If you already don't have let getRealAnswer You should make a new const inside your function.

Strict mode makes it impossible to accidentally create global variables. In normal JavaScript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern JavaScript). Assignments, which would accidentally create global variables, instead throw an error in strict mode:

                       // Assuming no global variable mistypeVariable exists
mistypeVariable = 17;  // this line throws a ReferenceError due to the
                       // misspelling of variable

So you function should be like this:

generateFakeAnswer = () => {
    const getRealAnswer = (state) => {
      return state.valueOne + state.valueTwo + state.valueThree;
    }

    this.setState({
      fakeAnswer: Math.floor(Math.random() * 10) + getRealAnswer(this.state)
    })
}
user_126087140
Related