From 36d4a969dd2e1ecf75166b24b6b0af3f7a70e71f Mon Sep 17 00:00:00 2001
From: Isaac Lem <lem.chiew.choon@gmail.com>
Date: Fri, 30 Aug 2019 04:56:00 -0700
Subject: [PATCH] Prevent usage of Array index in keys (#26102)

Summary:
To ensure source code conform with no-array-index-key rules: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md

## Changelog

[General] [Fixed] - To avoid using index as key
Pull Request resolved: https://github.com/facebook/react-native/pull/26102

Reviewed By: rubennorte

Differential Revision: D17093314

Pulled By: osdnk

fbshipit-source-id: 3c50f8fa0b220638e4cec1b71292f2c5c1bdc1c9
---
 .../NewAppScreen/components/LearnMoreLinks.js  | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/Libraries/NewAppScreen/components/LearnMoreLinks.js b/Libraries/NewAppScreen/components/LearnMoreLinks.js
index 1d63f141ebe..d18e612729b 100644
--- a/Libraries/NewAppScreen/components/LearnMoreLinks.js
+++ b/Libraries/NewAppScreen/components/LearnMoreLinks.js
@@ -17,44 +17,52 @@ import React from 'react';
 
 const links = [
   {
+    id: 1,
     title: 'The Basics',
     link: 'https://facebook.github.io/react-native/docs/tutorial',
     description: 'Explains a Hello World for React Native.',
   },
   {
+    id: 2,
     title: 'Style',
     link: 'https://facebook.github.io/react-native/docs/style',
     description:
       'Covers how to use the prop named style which controls the visuals.',
   },
   {
+    id: 3,
     title: 'Layout',
     link: 'https://facebook.github.io/react-native/docs/flexbox',
     description: 'React Native uses flexbox for layout, learn how it works.',
   },
   {
+    id: 4,
     title: 'Components',
     link: 'https://facebook.github.io/react-native/docs/components-and-apis',
     description: 'The full list of components and APIs inside React Native.',
   },
   {
+    id: 5,
     title: 'Navigation',
     link: 'https://facebook.github.io/react-native/docs/navigation',
     description:
       'How to handle moving between screens inside your application.',
   },
   {
+    id: 6,
     title: 'Networking',
     link: 'https://facebook.github.io/react-native/docs/network',
     description: 'How to use the Fetch API in React Native.',
   },
   {
+    id: 7,
     title: 'Help',
     link: 'https://facebook.github.io/react-native/help',
     description:
       'Need more help? There are many other React Native developers who may have the answer.',
   },
   {
+    id: 8,
     title: 'Follow us on Twitter',
     link: 'https://twitter.com/reactnative',
     description:
@@ -64,16 +72,16 @@ const links = [
 
 const LinkList = (): Node => (
   <View style={styles.container}>
-    {links.map((item, index) => {
+    {links.map(({id, title, link, description}) => {
       return (
-        <React.Fragment key={index}>
+        <React.Fragment key={id}>
           <View style={styles.separator} />
           <TouchableOpacity
             accessibilityRole={'button'}
-            onPress={() => openURLInBrowser(item.link)}
+            onPress={() => openURLInBrowser(link)}
             style={styles.linkContainer}>
-            <Text style={styles.link}>{item.title}</Text>
-            <Text style={styles.description}>{item.description}</Text>
+            <Text style={styles.link}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
           </TouchableOpacity>
         </React.Fragment>
       );