Enable eslint rule for missing jsx keys #2400
Conversation
.eslintrc
Outdated
| @@ -83,12 +83,13 @@ | |||
| "react/prefer-stateless-function": "off", | |||
| "react/jsx-indent-props": "off", | |||
| "react/jsx-closing-bracket-location": "off", | |||
| // FIXME: Switch using .jsx for jsx files https://github.com/mozilla/addons-frontend/issues/969. | |||
There was a problem hiding this comment.
It looks like this was copied from the old code and I don't think it's relevant. Can it be removed?
| @@ -33,19 +33,22 @@ class AddonPage extends React.Component { | |||
| ]; | |||
| if (addon.homepage) { | |||
| items.push([ | |||
| // eslint-disable-next-line react/jsx-key | |||
There was a problem hiding this comment.
Why can't these ones get keys?
There was a problem hiding this comment.
It's actually using data in the object to make the key later on. The eslint rule just sees any jsx in an array as needing a key so this is a false positive.
| @@ -71,6 +71,7 @@ export class RatingBase extends React.Component { | |||
| } | |||
|
|
|||
| return ( | |||
| // eslint-disable-next-line react/jsx-key | |||
There was a problem hiding this comment.
Ugh. I was afraid of this. There is a key defined in the props object but it looks like the linter isn't able to recognize it. Could you file an upstream bug?
There was a problem hiding this comment.
One was already filed here: jsx-eslint/eslint-plugin-react#613
| @@ -92,6 +92,7 @@ describe('App', () => { | |||
| return <p>The component</p>; | |||
| } | |||
| } | |||
| // eslint-disable-next-line react/jsx-key | |||
| const root = render({ children: [<MyComponent />] }); | |||
There was a problem hiding this comment.
You could also just add key="key" here.
muffinresearch
force-pushed
the
lint-for-missing-keys
branch
from
a1c3fc9 to
8ca7274
Compare
Fixes mozilla/addons#10385