Mixed operators in JSX

Question

I'd like to use mixed operators in JSX, for example:

{datas && datas.map(function(data,i){ return <MyComponent key={i} />}) || []}

While this technically works, ES lint warns of 'no-mixed-operators'. Is this a safe pattern to use in JSX?

Answer 1

From the ESLint documentation:

Disallow mixes of different operators (no-mixed-operators)

Enclosing complex expressions by parentheses clarifies the developer’s intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

If you don’t want to be notified about mixed operators, then it’s safe to disable this rule.

Hope this helps.