Enable eslint rule for missing jsx keys

mozilla · May 18, 2017 · a1c3fc9 · a1c3fc9
1 parent 4d79108
commit a1c3fc9
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 7 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -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.
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/jsx-first-prop-new-line": "off",
+    "react/jsx-key": "error",
     "react/no-string-refs": "error",
     // FIXME: Deprecate use of findDOMNode https://github.com/mozilla/addons-frontend/issues/968
     "react/no-find-dom-node": "off",
-    // FIXME: Switch using .jsx for jsx files https://github.com/mozilla/addons-frontend/issues/969.
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
   },
   "settings": {
     "import/ignore": [

diff --git a/src/admin/containers/AddonPage/index.js b/src/admin/containers/AddonPage/index.js
@@ -33,19 +33,22 @@ class AddonPage extends React.Component {
     ];
     if (addon.homepage) {
       items.push([
+        // eslint-disable-next-line react/jsx-key
         <a href={addon.homepage}
            rel="external noopener noreferrer" target="_blank">{_('View homepage')}</a>,
         'homepage',
       ]);
     }
     if (addon.support_email) {
       items.push([
+        // eslint-disable-next-line react/jsx-key
         <a href={`mailto:${addon.support_email}`}>{_('Email support')}</a>,
         'support_email',
       ]);
     }
     if (addon.support_url) {
       items.push([
+        // eslint-disable-next-line react/jsx-key
         <a href={addon.support_url}
            rel="external noopener noreferrer" target="_blank">{_('View support site')}</a>,
         'support_url',
@@ -85,6 +88,7 @@ class AddonPage extends React.Component {
                   [file.status, 'status'],
                   [`${file.size} bytes`, 'size'],
                   [file.created, 'created'],
+                  // eslint-disable-next-line react/jsx-key
                   [<a href={file.url}>{_('Download')}</a>, 'download'],
                 ], 'file-info')}
               </li>

diff --git a/src/amo/components/Categories.js b/src/amo/components/Categories.js
@@ -49,7 +49,7 @@ export class CategoriesBase extends React.Component {
         <ul className="Categories-list"
           ref={(ref) => { this.categories = ref; }}>
           {Object.values(categories).map((category) => (
-            <li className="Categories-list-item">
+            <li key={category.slug} className="Categories-list-item">
               <Link className="Categories-link"
                 to={`/${visibleAddonType(addonType)}/${category.slug}/`}>
                 {category.name}

diff --git a/src/amo/components/SearchSort/index.js b/src/amo/components/SearchSort/index.js
@@ -66,8 +66,8 @@ export class SearchSortBase extends React.Component {
           {i18n.gettext('Sort')}
         </a>
         <ul id="SearchSortOptions" className="SearchSort-list">
-          {this.sortOptions().map((option) => (
-            <li className="SearchSort-list-item">
+          {this.sortOptions().map((option, index) => (
+            <li key={`sort-${index}`} className="SearchSort-list-item">
               <SearchSortLink currentSort={currentSort} filters={filters}
                 pathname={pathname} sort={option.sort}>
                 {option.text}

diff --git a/src/core/components/Paginate/index.js b/src/core/components/Paginate/index.js
@@ -106,9 +106,10 @@ export class PaginateBase extends React.Component {
             page={currentPage - 1}
             text={i18n.gettext('Previous')}
           />
-          {this.visiblePages({ pageCount }).map((page) =>
+          {this.visiblePages({ pageCount }).map((page, index) =>
             <PaginatorLink
               {...linkParams}
+              key={`page-${index}`}
               page={page}
             />
           )}

diff --git a/src/ui/components/ErrorList/index.js b/src/ui/components/ErrorList/index.js
@@ -61,7 +61,7 @@ class ErrorList extends React.Component {
 
     return (
       <ul className={classNames('ErrorList', className)}>
-        {items.map((item) => <li className="ErrorList-item">{item}</li>)}
+        {items.map((item, index) => <li className="ErrorList-item" key={`erroritem-${index}`}>{item}</li>)}
       </ul>
     );
   }

diff --git a/src/ui/components/Rating/index.js b/src/ui/components/Rating/index.js
@@ -71,6 +71,7 @@ export class RatingBase extends React.Component {
       }
 
       return (
+        // eslint-disable-next-line react/jsx-key
         <button
           onClick={this.onSelectRating}
           value={thisRating}

diff --git a/tests/client/amo/containers/TestApp.js b/tests/client/amo/containers/TestApp.js
@@ -92,6 +92,7 @@ describe('App', () => {
         return <p>The component</p>;
       }
     }
+    // eslint-disable-next-line react/jsx-key
     const root = render({ children: [<MyComponent />] });
     const rootNode = findDOMNode(root);
     assert.equal(rootNode.tagName.toLowerCase(), 'div');