From ebc232aa57d131492579d291d6b4fca7f42827b1 Mon Sep 17 00:00:00 2001
From: Marcin Cichocki <marcincichocki1993@gmail.com>
Date: Thu, 11 Nov 2021 16:19:31 +0100
Subject: [PATCH] fix(client-electron): use unique id on lists

---
 src/electron/renderer/components/KeyBind.tsx | 2 +-
 src/electron/renderer/components/Select.tsx  | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/electron/renderer/components/KeyBind.tsx b/src/electron/renderer/components/KeyBind.tsx
index 2dadc980..9979e1af 100644
--- a/src/electron/renderer/components/KeyBind.tsx
+++ b/src/electron/renderer/components/KeyBind.tsx
@@ -185,7 +185,7 @@ export const KeyBind = ({
           <KeyBindText>Unbound</KeyBindText>
         ) : (
           selected.map((key, i) => (
-            <Fragment key={i}>
+            <Fragment key={key}>
               {!!i && <KeyCodeSeparator>+</KeyCodeSeparator>}
               <KeyCode>{key}</KeyCode>
             </Fragment>
diff --git a/src/electron/renderer/components/Select.tsx b/src/electron/renderer/components/Select.tsx
index fdbababc..fe7a2591 100644
--- a/src/electron/renderer/components/Select.tsx
+++ b/src/electron/renderer/components/Select.tsx
@@ -97,7 +97,10 @@ const SelectViewer = ({ options, index }: SelectViewerProps) => (
     <SelectViewerValue>{options[index].name}</SelectViewerValue>
     <SelectViewerOptions>
       {options.map((option, i) => (
-        <SelectViewerOption key={i} active={index === i}></SelectViewerOption>
+        <SelectViewerOption
+          key={option.name}
+          active={index === i}
+        ></SelectViewerOption>
       ))}
     </SelectViewerOptions>
   </SelectViewerWrapper>
@@ -150,8 +153,8 @@ export const Select = ({
   return (
     <SelectWrapper disabled={disabled}>
       <select hidden value={value} onChange={onChange}>
-        {options.map(({ value }, i) => (
-          <option key={i} value={value}></option>
+        {options.map(({ name, value }) => (
+          <option key={name} value={value}></option>
         ))}
       </select>
       <SelectButton onClick={prev} disabled={disabled}>