diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx index 7d0a9b35ca4aa03bb6c84b9ef2efa44bde705fb9..2a0d172c2ced2182fe5b792ab689da9a94e96d77 100644 --- a/src/FlexibleTable/FlexibleTable.jsx +++ b/src/FlexibleTable/FlexibleTable.jsx @@ -120,7 +120,7 @@ export default function FlexibleTable({ style={{padding: 0, listStyle: "none"}} > {headers.map((header, index) => ( - <Draggable key={header} draggableId={header} index={index}> + <Draggable key={`fitb-draggable-${index}-${header}`} draggableId={header} index={index}> {(provided) => ( <li ref={provided.innerRef} diff --git a/src/FlexibleTable/TableBody.jsx b/src/FlexibleTable/TableBody.jsx index 0415768a2f92c52c5f0110476fd7f28b29689510..aeb7d68e4d1ff691ee50e9310abfb901e68270dc 100644 --- a/src/FlexibleTable/TableBody.jsx +++ b/src/FlexibleTable/TableBody.jsx @@ -38,7 +38,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) { }}> {rows.map((row, index) => ( states[index] ? - <td className={"fitb-item-table-cell"} key={index} + <td className={"fitb-item-table-cell"} key={`fitb-item-table-cell-${index}`} style={{ borderWidth: "0px", borderStyle: "solid", @@ -48,7 +48,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) { }}> <RichText tagName="div" - key={index} + key={`fitb-item-table-cell-text-${index}`} value={row} style={{ color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor, diff --git a/src/FlexibleTable/TableHead.jsx b/src/FlexibleTable/TableHead.jsx index 2f66c338d963f130b84c3bb4a61b1ad9f9a9dc07..39989ebb0ea32d105ddd9282ca233fc9ec4060ae 100644 --- a/src/FlexibleTable/TableHead.jsx +++ b/src/FlexibleTable/TableHead.jsx @@ -41,7 +41,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states} }}> <RichText tagName="div" - key={index} + key={`fitb-item-table-header-cell-${index}`} value={header} style={{ color: headerTextColor,