From 7fcd41108934f56561eb381b3dbdde1bf64ca02d Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amogh@peerdb.io>
Date: Tue, 12 Dec 2023 01:12:07 +0530
Subject: [PATCH] UI: No index as key (#796)

For list of components whose ordering or cardinality can change, using
the array index as the key attribute isn't ideal. This PR uses a unique
component-based key instead such as row.id or row.name in those cases
---
 ui/app/mirrors/create/cdc/schemabox.tsx    | 11 ++++++-----
 ui/app/mirrors/create/cdc/tablemapping.tsx |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/ui/app/mirrors/create/cdc/schemabox.tsx b/ui/app/mirrors/create/cdc/schemabox.tsx
index e205f33ab5..4195fae83d 100644
--- a/ui/app/mirrors/create/cdc/schemabox.tsx
+++ b/ui/app/mirrors/create/cdc/schemabox.tsx
@@ -182,10 +182,10 @@ const SchemaBox = ({
                     row.schema === schema &&
                     row.source.toLowerCase().includes(tableQuery.toLowerCase())
                 )
-                .map((row, index) => {
+                .map((row) => {
                   const columns = getTableColumns(row.source);
                   return (
-                    <div key={index} style={tableBoxStyle}>
+                    <div key={row.source} style={tableBoxStyle}>
                       <div
                         style={{
                           display: 'flex',
@@ -222,6 +222,7 @@ const SchemaBox = ({
                             style={{
                               fontSize: 12,
                               marginTop: '0.5rem',
+                              cursor: 'pointer',
                             }}
                             variant='simple'
                             placeholder={'Enter target table'}
@@ -242,13 +243,13 @@ const SchemaBox = ({
                             Columns
                           </Label>
                           {columns ? (
-                            columns.map((column, index) => {
+                            columns.map((column) => {
                               const columnName = column.split(':')[0];
                               const columnType = column.split(':')[1];
                               const isPkey = column.split(':')[2] === 'true';
                               return (
                                 <RowWithCheckbox
-                                  key={index}
+                                  key={column}
                                   label={
                                     <Label
                                       as='label'
@@ -257,7 +258,7 @@ const SchemaBox = ({
                                         display: 'flex',
                                       }}
                                     >
-                                      {columnName}{' '}
+                                      {columnName}
                                       <p
                                         style={{
                                           marginLeft: '0.5rem',
diff --git a/ui/app/mirrors/create/cdc/tablemapping.tsx b/ui/app/mirrors/create/cdc/tablemapping.tsx
index ee4d86d588..85c889cb4b 100644
--- a/ui/app/mirrors/create/cdc/tablemapping.tsx
+++ b/ui/app/mirrors/create/cdc/tablemapping.tsx
@@ -61,9 +61,9 @@ const TableMapping = ({
             ?.filter((schema) => {
               return schema.toLowerCase().includes(schemaQuery.toLowerCase());
             })
-            .map((schema, index) => (
+            .map((schema) => (
               <SchemaBox
-                key={index}
+                key={schema}
                 schema={schema}
                 sourcePeer={sourcePeerName}
                 rows={rows}