make lint error on missing keys

Summary: When exploratory testing Flipper, I generally see quite some React key warnings. So it seems that plugin devs often miss them. This diff will configure linting more aggressively to address that (it's not fool proof, but will find the most common cases).

Reviewed By: nikoant

Differential Revision: D26722707

fbshipit-source-id: e0d2b56de2422e1147f52c8e9150d00c7ee64bd2

desktop/.eslintrc.js

@@ -51,6 +51,7 @@ module.exports = {
     'react/react-in-jsx-scope': 0, // not needed with our metro implementation
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    'react/jsx-key': 'error',
     'no-new': 0, // new keyword needed e.g. new Notification
     'no-catch-shadow': 0, // only relevant for IE8 and below
     'no-bitwise': 0, // bitwise operations needed in some places

desktop/app/src/chrome/ShareSheetErrorList.tsx

@@ -51,8 +51,10 @@ export default class Popover extends PureComponent<Props> {
       <VBox scrollable={true} maxHeight={300}>
         <Info type={this.props.type}>
           <Title bold>{this.props.title}</Title>
-          {this.props.errors.map((e: Error) => (
-            <ErrorMessage code>{formatError(e)}</ErrorMessage>
+          {this.props.errors.map((e: Error, index) => (
+            <ErrorMessage code key={index}>
+              {formatError(e)}
+            </ErrorMessage>
           ))}
         </Info>
       </VBox>

desktop/plugins/hermesdebuggerrn/SelectScreen.tsx

@@ -71,7 +71,7 @@ export default function SelectScreen(props: Props) {
         </Item>
         {props.targets.map((target) => {
           return (
-            <Item onClick={() => props.onSelect(target)}>
+            <Item onClick={() => props.onSelect(target)} key={target.id}>
               <Icon size={20} name="code" color={colors.info} />
               <FlexColumn>
                 <ItemTitle>{target.title}</ItemTitle>

desktop/plugins/leak_canary/index.tsx

@@ -230,6 +230,7 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin<
               const selected = selectedIdx == idx ? selectedEid : null;
               return (
                 <Panel
+                  key={idx}
                   collapsable={false}
                   padded={false}
                   heading={leak.title}

desktop/plugins/navigation/components/Timeline.tsx

@@ -68,9 +68,8 @@ export default (props: Props) => {
         <TimelineLine />
         {events.map((event: NavigationEvent, idx: number) => {
           return (
-            <NavigationEventContainer>
+            <NavigationEventContainer key={idx}>
               <NavigationInfoBox
-                key={idx}
                 isBookmarked={
                   event.uri != null ? bookmarks.has(event.uri) : false
                 }

desktop/plugins/network/RequestDetails.tsx

@@ -578,7 +578,7 @@ class JSONTextFormatter {
         return body
           .split('\n')
           .map((json) => JSON.parse(json))
-          .map((data) => <JSONText>{data}</JSONText>);
+          .map((data, idx) => <JSONText key={idx}>{data}</JSONText>);
       }
     }
   };

desktop/plugins/sandbox/index.tsx

@@ -128,9 +128,8 @@ export default class SandboxView extends FlipperPlugin<
           </SandboxView.FeedbackMessage>
         </SandboxView.TextInputLayout>
         {this.state.sandboxes.map((sandbox) => (
-          <ButtonContainer>
+          <ButtonContainer key={sandbox.value}>
             <BigButton
-              key={sandbox.value}
               onClick={() => this.onSendSandboxEnvironment(sandbox.value)}>
               {sandbox.name}
             </BigButton>