From 1aab93d0e3e91f73accdfc3a59afbdaf97c0d08e Mon Sep 17 00:00:00 2001
From: Krasimir Nedelchev <19822240+kaykayehnn@users.noreply.github.com>
Date: Thu, 1 Aug 2019 13:08:50 +0300
Subject: [PATCH] [Fix] `jsx-key`: improve docs and confusing error message

---
 docs/rules/jsx-key.md      | 22 ++++++++++++++++++++++
 lib/rules/jsx-key.js       |  7 +++++--
 tests/lib/rules/jsx-key.js | 13 +++++++++++--
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/docs/rules/jsx-key.md b/docs/rules/jsx-key.md
index 6e7b71ef94..705c627043 100644
--- a/docs/rules/jsx-key.md
+++ b/docs/rules/jsx-key.md
@@ -27,6 +27,26 @@ data.map((x, i) => <Hello key={i}>{x}</Hello>);
 <Hello key={id} {...{ id, caption }} />
 ```
 
+## Rule Options
+
+```js
+...
+"react/jsx-key": [<enabled>, { "checkFragmentShorthand": <boolean> }]
+...
+```
+
+### `checkFragmentShorthand` (default: `false`)
+
+When `true` the rule will check if usage of the [shorthand fragment syntax][short_syntax] requires a key. This option was added to avoid a breaking change and will be the default in the next major version. 
+
+The following patterns are considered warnings:
+
+```jsx
+[<></>, <></>, <></>];
+
+data.map(x => <>{x}</>);
+```
+
 ## When not to use
 
 If you are not using JSX then you can disable this rule.
@@ -34,3 +54,5 @@ If you are not using JSX then you can disable this rule.
 Also, if you have some prevalent situation where you use arrow functions to
 return JSX that will not be held in an iterable, you may want to disable this
 rule.
+
+[short_syntax]: https://reactjs.org/docs/fragments.html#short-syntax
diff --git a/lib/rules/jsx-key.js b/lib/rules/jsx-key.js
index c40e476d26..8daeebf10e 100644
--- a/lib/rules/jsx-key.js
+++ b/lib/rules/jsx-key.js
@@ -7,6 +7,7 @@
 
 const hasProp = require('jsx-ast-utils/hasProp');
 const docsUrl = require('../util/docsUrl');
+const pragmaUtil = require('../util/pragma');
 
 
 // ------------------------------------------------------------------------------
@@ -40,6 +41,8 @@ module.exports = {
   create(context) {
     const options = Object.assign({}, defaultOptions, context.options[0]);
     const checkFragmentShorthand = options.checkFragmentShorthand;
+    const reactPragma = pragmaUtil.getFromContext(context);
+    const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
 
     function checkIteratorElement(node) {
       if (node.type === 'JSXElement' && !hasProp(node.openingElement.attributes, 'key')) {
@@ -50,7 +53,7 @@ module.exports = {
       } else if (checkFragmentShorthand && node.type === 'JSXFragment') {
         context.report({
           node,
-          message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'
+          message: `Missing "key" prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use ${reactPragma}.${fragmentPragma} instead`
         });
       }
     }
@@ -81,7 +84,7 @@ module.exports = {
         if (node.parent.type === 'ArrayExpression') {
           context.report({
             node,
-            message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'
+            message: `Missing "key" prop for element in array. Shorthand fragment syntax does not support providing keys. Use ${reactPragma}.${fragmentPragma} instead`
           });
         }
       },
diff --git a/tests/lib/rules/jsx-key.js b/tests/lib/rules/jsx-key.js
index fd28fa5dca..df8024ce1c 100644
--- a/tests/lib/rules/jsx-key.js
+++ b/tests/lib/rules/jsx-key.js
@@ -22,6 +22,13 @@ const parserOptions = {
   }
 };
 
+const settings = {
+  react: {
+    pragma: 'Act',
+    fragment: 'Frag'
+  }
+};
+
 // ------------------------------------------------------------------------------
 // Tests
 // ------------------------------------------------------------------------------
@@ -65,11 +72,13 @@ ruleTester.run('jsx-key', rule, {
     code: '[1, 2, 3].map(x => <>{x}</>);',
     parser: parsers.BABEL_ESLINT,
     options: [{checkFragmentShorthand: true}],
-    errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'}]
+    settings,
+    errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
   }, {
     code: '[<></>];',
     parser: parsers.BABEL_ESLINT,
     options: [{checkFragmentShorthand: true}],
-    errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'}]
+    settings,
+    errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
   }]
 });