From 07ac02e7e7481ef9fd3c2346d9e59316379509bd Mon Sep 17 00:00:00 2001
From: Johannes Haubold <jh@megorei.com>
Date: Wed, 25 Sep 2024 18:41:25 +0200
Subject: [PATCH] Add keys to Wellplate rows in designer tab

---
 .../details/wellplates/designerTab/Wellplate.js        | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Wellplate.js b/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Wellplate.js
index b2cb045967..459ff544e5 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Wellplate.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Wellplate.js
@@ -63,13 +63,17 @@ const Wellplate = ({ wellplate, handleWellsChange }) => {
     // generate first row - empty leading cell + column labels
     const columnLabels = []
     for (let columnIndex = 0; columnIndex <= wellplate.width; columnIndex += 1) {
-      columnLabels.push(<HorizontalHeaderField label={WellplateModel.columnLabel(columnIndex)} />)
+      const label = WellplateModel.columnLabel(columnIndex);
+      const key = `column_header_${columnIndex}`
+      columnLabels.push(<HorizontalHeaderField label={label} key={key} />)
     }
     rows.push(columnLabels)
 
     // generate remaining rows with leading header field
     for (let rowIndex = 1; rowIndex <= wellplate.height; rowIndex += 1) {
-      const row = [<VerticalHeaderField label={WellplateModel.rowLabel(rowIndex)} />]
+      const label = WellplateModel.rowLabel(rowIndex);
+      const key = `row_header_${rowIndex}`
+      const row = [<VerticalHeaderField label={label} key={key} />]
       rows.push(row)
     }
 
@@ -95,7 +99,7 @@ const Wellplate = ({ wellplate, handleWellsChange }) => {
   const wellSize = 60
   return(
     <div className="d-inline-flex flex-column">
-      {wellplateRows(wellplate).map(rowContent => (<div className="d-inline-flex flex-row">{rowContent}</div>))}
+      {wellplateRows(wellplate).map((rowContent, index) => (<div className="d-inline-flex flex-row" key={index}>{rowContent}</div>))}
       {selectedWell &&
         <WellDetails
           well={selectedWell}