[new] add jsx-no-length-truthiness rule

README.md

@@ -155,6 +155,7 @@ Enable the rules that you would like to use.
 * [react/jsx-no-bind](docs/rules/jsx-no-bind.md): Prevent usage of `.bind()` and arrow functions in JSX props
 * [react/jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md): Prevent comments from being inserted as text nodes
 * [react/jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md): Prevent duplicate props in JSX
+* [react/jsx-no-length-truthiness](docs/rules/jsx-no-length-truthiness.md): Prevent truthiness checks of `.length` that might render unwanted 0:s (fixable)
 * [react/jsx-no-literals](docs/rules/jsx-no-literals.md): Prevent usage of unwrapped JSX strings
 * [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md): Prevent usage of unsafe `target='_blank'`
 * [react/jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX

docs/rules/jsx-no-length-truthiness.md

@@ -0,0 +1,25 @@
+# Prevent guarding with length truthiness in JSX (react/jsx-no-length-truthiness)
+
+Flags all instances of checking `.length` truthiness in JSX.
+
+**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+
+## Rule Details
+
+It is a common pattern to render something or nothing using `&&` as a guard:
+
+```jsx
+<div>{showHeader && <Header />} ... </div>
+```
+
+A common mistake is to use array length naïvely for this:
+
+```jsx
+<div>{posts.length && posts.map(p => ...)}</div>
+```
+
+The above code will render a presumably unwanted `0` when the array is empty. This rule checks for such erroneous use, and fixes it to the correct boolean check:
+
+```jsx
+<div>{posts.length > 0 && posts.map(p => ...)}</div>
+```

index.js

@@ -30,6 +30,7 @@ const allRules = {
   'jsx-no-bind': require('./lib/rules/jsx-no-bind'),
   'jsx-no-comment-textnodes': require('./lib/rules/jsx-no-comment-textnodes'),
   'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),
+  'jsx-no-length-truthiness': require('./lib/rules/jsx-no-length-truthiness'),
   'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
   'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),
   'jsx-one-expression-per-line': require('./lib/rules/jsx-one-expression-per-line'),

lib/rules/jsx-no-length-truthiness.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Prevent accidentally rendering zeroes by checking .length truthiness
+ * @author Carl Mäsak & David Waller
+ */
+'use strict';
+
+const docsUrl = require('../util/docsUrl');
+const jsxUtils = require('../util/jsx');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const message = 'Don\'t check .length truthiness in JSX, might render 0';
+
+function findDangerousLengthMember(node) {
+  if (node.type === 'MemberExpression' && node.property.name === 'length') {
+    return node;
+  }
+  if (node.type === 'LogicalExpression') {
+    // we're interested in right side of OR:s and both side of AND:s
+    return (
+      findDangerousLengthMember(node.right) ||
+      (node.operator === '&&' && findDangerousLengthMember(node.left))
+    );
+  }
+  return null;
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevent checking .length truthiness in JSX',
+      category: 'Possible Errors',
+      recommended: false,
+      url: docsUrl('jsx-no-length-truthiness')
+    },
+    schema: [],
+    fixable: true
+  },
+
+  create: context => ({
+    LogicalExpression(node) {
+      // We're only interested in AND:s, where we'll check for guards to the left
+      if (node.operator !== '&&') {
+        return;
+      }
+      // We know we're "rendering" if right side is JSX or we're inside JSX expression
+      if (
+        !jsxUtils.isJSX(node.right) &&
+        node.parent.type !== 'JSXExpressionContainer'
+      ) {
+        return;
+      }
+      // If left side doesn't check truthiness of .length then all is well
+      const dangerousLengthMember = findDangerousLengthMember(node.left);
+      if (!dangerousLengthMember) {
+        return;
+      }
+      context.report({
+        node,
+        message,
+        fix(fixer) {
+          return fixer.insertTextAfter(dangerousLengthMember, ' > 0');
+        }
+      });
+    }
+  })
+};

tests/lib/rules/jsx-no-length-truthiness.js

@@ -0,0 +1,81 @@
+/**
+ * @fileoverview Tests for jsx-no-length-truthiness
+ * @author Carl Mäsak & David Waller
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/jsx-no-length-truthiness');
+const RuleTester = require('eslint').RuleTester;
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({parserOptions});
+
+const expectedError = {
+  message: 'Don\'t check .length truthiness in JSX, might render 0'
+};
+
+ruleTester.run('jsx-no-length-truthiness', rule, {
+  valid: [
+    {code: 'arr.length > 0 && <Foo />'},
+    {code: 'arr.length > 1 && <Foo />'},
+    {code: 'arr.length && "foobar"'}, // ok since we can't tell if this is a JSX expression at all
+    {code: 'arr.longth && <Foo />'},
+    {code: '(arr.length || flag) && <Foo />'},
+    {code: '<Foo>Number of posts: {arr.length}</Foo>'},
+    {code: '<Foo>Number of posts: {flag && arr.length}</Foo>'},
+    {code: '<Foo>You have {arr.length || "no"} posts</Foo>'}
+  ],
+  invalid: [
+    {
+      code: 'arr.length && <Foo />',
+      errors: [expectedError],
+      output: 'arr.length > 0 && <Foo />'
+    },
+    {
+      code: 'arr.foo.length && <Foo />',
+      errors: [expectedError],
+      output: 'arr.foo.length > 0 && <Foo />'
+    },
+    {
+      code: 'arr && arr.length && <Foo />',
+      errors: [expectedError],
+      output: 'arr && arr.length > 0 && <Foo />'
+    },
+    {
+      code: 'arr && arr.length && somethingElse && <Foo />',
+      errors: [expectedError],
+      output: 'arr && arr.length > 0 && somethingElse && <Foo />'
+    },
+    {
+      code: 'flag || arr.length && <Foo />',
+      errors: [expectedError],
+      output: 'flag || arr.length > 0 && <Foo />'
+    },
+    {
+      code: '<Foo><Bar/>{arr.length && "you have posts!"}</Foo>',
+      errors: [expectedError],
+      output: '<Foo><Bar/>{arr.length > 0 && "you have posts!"}</Foo>'
+    },
+    {
+      code: '<Foo><Bar/>{flag && arr.length && "you have posts!"}</Foo>',
+      errors: [expectedError],
+      output: '<Foo><Bar/>{flag && arr.length > 0 && "you have posts!"}</Foo>'
+    }
+  ]
+});