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?
From the ESLint documentation:
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.
You can just Wrap in the parenthesis like this. It not going to show that warning.
{datas && (datas.map(function(data,i){ return <MyComponent key={i} />}) || [])}
It worked for me.