Skip to content

Commit f5c818a

Browse files
committed
Teach no-array-index-key about React.cloneElement
This helps to cover more possible use-cases that we want to prevent with this rule.
1 parent d80362f commit f5c818a

File tree

3 files changed

+39
-1
lines changed

3 files changed

+39
-1
lines changed

docs/rules/no-array-index-key.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ things.map((thing, index) => (
1515
<Hello key={index} />
1616
));
1717

18+
things.map((thing, index) => (
19+
React.cloneElement(thing, { key: index })
20+
));
21+
1822
things.forEach((thing, index) => {
1923
otherThings.push(<Hello key={index} />);
2024
});
@@ -43,6 +47,10 @@ things.map((thing) => (
4347
<Hello key={thing.id} />
4448
));
4549

50+
things.map((thing) => (
51+
React.cloneElement(thing, { key: thing.id })
52+
));
53+
4654
things.forEach((thing) => {
4755
otherThings.push(<Hello key={thing.id} />);
4856
});

lib/rules/no-array-index-key.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ module.exports = {
124124
if (
125125
node.callee
126126
&& node.callee.type === 'MemberExpression'
127-
&& node.callee.property.name === 'createElement'
127+
&& ['createElement', 'cloneElement'].indexOf(node.callee.property.name) !== -1
128128
&& node.arguments.length > 1
129129
) {
130130
// React.createElement

tests/lib/rules/no-array-index-key.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,18 @@ ruleTester.run('no-array-index-key', rule, {
5959
{
6060
code: 'foo.map((baz, i) => <Foo key={\'foo\' + baz.id} />)',
6161
parserOptions: parserOptions
62+
},
63+
64+
{
65+
code: [
66+
'foo.map((item, i) => {',
67+
' return React.cloneElement(someChild, {',
68+
' key: item.id',
69+
' })',
70+
'})'
71+
].join('\n'),
72+
errors: [{message: 'Do not use Array index in keys'}],
73+
parserOptions: parserOptions
6274
}
6375
],
6476

@@ -69,6 +81,12 @@ ruleTester.run('no-array-index-key', rule, {
6981
parserOptions: parserOptions
7082
},
7183

84+
{
85+
code: '[{}, {}].map((bar, i) => <Foo key={i} />)',
86+
errors: [{message: 'Do not use Array index in keys'}],
87+
parserOptions: parserOptions
88+
},
89+
7290
{
7391
code: 'foo.map((bar, anything) => <Foo key={anything} />)',
7492
errors: [{message: 'Do not use Array index in keys'}],
@@ -93,6 +111,18 @@ ruleTester.run('no-array-index-key', rule, {
93111
parserOptions: parserOptions
94112
},
95113

114+
{
115+
code: [
116+
'foo.map((item, i) => {',
117+
' return React.cloneElement(someChild, {',
118+
' key: i',
119+
' })',
120+
'})'
121+
].join('\n'),
122+
errors: [{message: 'Do not use Array index in keys'}],
123+
parserOptions: parserOptions
124+
},
125+
96126
{
97127
code: 'foo.forEach((bar, i) => { baz.push(<Foo key={i} />); })',
98128
errors: [{message: 'Do not use Array index in keys'}],

0 commit comments

Comments
 (0)