There Once was an Arrow Function
Hello, I’m here to share how a change of arrow function declaration in JavaScript and React can cause compiling issues.
( ) => ( ) vs ( ) => { }
Hopefully pointing this out early can help some beginners like myself not to overlook simple syntax changes when in React or JavaScript in general. Just a heads-up, I feel the below content will be of more helpful with some familiarity with arrow functions.
Background
I came across this issue while working on a functional component in React. See below for the code I was working on.
On line 3, you can see a function was declared with the following syntax
So What Happened
Often in React, functions are assigned to variables to be called or invoked in the body of the JSX. However, as seen below, I was unable to successfully compile my component when declaring and assigning a function using the functional declaration syntax of ` ( ) => ( ) `.
My code compiled after changing the function declaration to this format `( ) => { }`
Conclusion
But why does this happen? It is partially due to the idea of implicit and explicit returns. Here’s a resource that helped my understanding. To summarize you have to `explicitly` declare the ‘return’ statement when using curly bracket syntax `( ) => { }` and as a rule you cannot have function declarations within implicit declarations `( ) => ( )`.
Thanks for reading!
` ( ) => ( ) `.
