Skip to content

Commit 1aab93d

Browse files
kaykayehnnljharb
authored andcommitted
[Fix] jsx-key: improve docs and confusing error message
1 parent f6fd9d4 commit 1aab93d

File tree

3 files changed

+38
-4
lines changed

3 files changed

+38
-4
lines changed

docs/rules/jsx-key.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,32 @@ data.map((x, i) => <Hello key={i}>{x}</Hello>);
2727
<Hello key={id} {...{ id, caption }} />
2828
```
2929

30+
## Rule Options
31+
32+
```js
33+
...
34+
"react/jsx-key": [<enabled>, { "checkFragmentShorthand": <boolean> }]
35+
...
36+
```
37+
38+
### `checkFragmentShorthand` (default: `false`)
39+
40+
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.
41+
42+
The following patterns are considered warnings:
43+
44+
```jsx
45+
[<></>, <></>, <></>];
46+
47+
data.map(x => <>{x}</>);
48+
```
49+
3050
## When not to use
3151

3252
If you are not using JSX then you can disable this rule.
3353

3454
Also, if you have some prevalent situation where you use arrow functions to
3555
return JSX that will not be held in an iterable, you may want to disable this
3656
rule.
57+
58+
[short_syntax]: https://reactjs.org/docs/fragments.html#short-syntax

lib/rules/jsx-key.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
const hasProp = require('jsx-ast-utils/hasProp');
99
const docsUrl = require('../util/docsUrl');
10+
const pragmaUtil = require('../util/pragma');
1011

1112

1213
// ------------------------------------------------------------------------------
@@ -40,6 +41,8 @@ module.exports = {
4041
create(context) {
4142
const options = Object.assign({}, defaultOptions, context.options[0]);
4243
const checkFragmentShorthand = options.checkFragmentShorthand;
44+
const reactPragma = pragmaUtil.getFromContext(context);
45+
const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
4346

4447
function checkIteratorElement(node) {
4548
if (node.type === 'JSXElement' && !hasProp(node.openingElement.attributes, 'key')) {
@@ -50,7 +53,7 @@ module.exports = {
5053
} else if (checkFragmentShorthand && node.type === 'JSXFragment') {
5154
context.report({
5255
node,
53-
message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'
56+
message: `Missing "key" prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use ${reactPragma}.${fragmentPragma} instead`
5457
});
5558
}
5659
}
@@ -81,7 +84,7 @@ module.exports = {
8184
if (node.parent.type === 'ArrayExpression') {
8285
context.report({
8386
node,
84-
message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'
87+
message: `Missing "key" prop for element in array. Shorthand fragment syntax does not support providing keys. Use ${reactPragma}.${fragmentPragma} instead`
8588
});
8689
}
8790
},

tests/lib/rules/jsx-key.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ const parserOptions = {
2222
}
2323
};
2424

25+
const settings = {
26+
react: {
27+
pragma: 'Act',
28+
fragment: 'Frag'
29+
}
30+
};
31+
2532
// ------------------------------------------------------------------------------
2633
// Tests
2734
// ------------------------------------------------------------------------------
@@ -65,11 +72,13 @@ ruleTester.run('jsx-key', rule, {
6572
code: '[1, 2, 3].map(x => <>{x}</>);',
6673
parser: parsers.BABEL_ESLINT,
6774
options: [{checkFragmentShorthand: true}],
68-
errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'}]
75+
settings,
76+
errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
6977
}, {
7078
code: '[<></>];',
7179
parser: parsers.BABEL_ESLINT,
7280
options: [{checkFragmentShorthand: true}],
73-
errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'}]
81+
settings,
82+
errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
7483
}]
7584
});

0 commit comments

Comments
 (0)