Why can't I use a ternary operator and arrow function in this way in JSX?

Question

With babel-preset-react (EDIT: babel version: v6.26.0), the following expression fails with the error "Invalid left-hand side in arrow function parameters" (try on babel repl):

true ? ("test") : x => 42      //FAILS, but only with `babel-preset-react`

Yet it works given a small modification:

true ? "test" : x => 42        //works fine

Both of these scenarios work as expected in seemingly any other configuration.

Is this a bug? Or is there something as a part of JSX parsing that causes this to happen?

Answer 1

Arrow functions are parsed differently than regular ones see Parsing order

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions.

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

It must have something to do with associativity of ternary operator (right-to-left) see link