chore: use react fragment instead of key prop

Author: im-adithya

components/Contact.tsx

@@ -6,19 +6,16 @@ import { Text } from "~/components/ui/text";
 import { initiatePaymentFlow } from "~/lib/initiatePaymentFlow";
 
 export default function Contact({
-  key,
   lnAddress,
   name,
   onDelete,
 }: {
-  key: React.Key;
   lnAddress: string;
   name?: string;
   onDelete?: () => void;
 }) {
   return (
     <TouchableOpacity
-      key={key}
       className="flex flex-row items-center gap-4 px-6 py-4"
       onPress={async () => {
         await initiatePaymentFlow(lnAddress);

pages/send/Address.tsx

@@ -228,11 +228,12 @@ export function Address() {
             {filteredAddressBookEntries.length > 0 ? (
               <ScrollView className="flex-1 flex flex-col">
                 {filteredAddressBookEntries.map((addressBookEntry, index) => (
-                  <Contact
-                    key={index}
-                    name={addressBookEntry.name}
-                    lnAddress={addressBookEntry.lightningAddress}
-                  />
+                  <React.Fragment key={index}>
+                    <Contact
+                      name={addressBookEntry.name}
+                      lnAddress={addressBookEntry.lightningAddress}
+                    />
+                  </React.Fragment>
                 ))}
               </ScrollView>
             ) : (

pages/settings/AddressBook.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ScrollView, View } from "react-native";
 import Contact from "~/components/Contact";
 import Screen from "~/components/Screen";
@@ -13,14 +14,15 @@ export function AddressBook() {
       <ScrollView className="flex-1 flex flex-col mt-4">
         {addressBookEntries.length > 0 ? (
           addressBookEntries.map((addressBookEntry, index) => (
-            <Contact
-              key={index}
-              name={addressBookEntry.name}
-              lnAddress={addressBookEntry.lightningAddress}
-              onDelete={() => {
-                useAppStore.getState().removeAddressBookEntry(index);
-              }}
-            />
+            <React.Fragment key={index}>
+              <Contact
+                name={addressBookEntry.name}
+                lnAddress={addressBookEntry.lightningAddress}
+                onDelete={() => {
+                  useAppStore.getState().removeAddressBookEntry(index);
+                }}
+              />
+            </React.Fragment>
           ))
         ) : (
           <Text className="text-lg">No entries yet.</Text>