Mixed operators in JSX Mixed operators in JSX reactjs reactjs

Mixed operators in JSX


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.


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.