Ensure we use unique React keys in the multi-select component (#410)

openmrs · Oct 11, 2024 · 810fd93 · 810fd93
1 parent 4bca1cb
commit 810fd93
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/components/inputs/multi-select/multi-select.component.tsx b/src/components/inputs/multi-select/multi-select.component.tsx
@@ -104,7 +104,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                 initialSelectedItems={initiallySelectedQuestionItems}
                 label={''}
                 titleText={label}
-                key={counter}
+                key={field.id}
                 itemToString={(item) => (item ? item.label : ' ')}
                 disabled={field.isDisabled}
                 invalid={errors.length > 0}
@@ -118,10 +118,10 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                 {field.questionOptions.answers?.map((value, index) => {
                   return (
                     <Checkbox
-                      key={value.concept}
+                      key={`${field.id}-${value.concept}`}
                       className={styles.checkbox}
                       labelText={value.label}
-                      id={value.concept}
+                      id={`${field.id}-${value.concept}`}
                       onChange={() => {
                         handleSelectCheckbox(value);
                       }}