👻 Add some missing key props to fragments (#1594)

Since using the nice looking version of `React.Fragment` of `<>...</>` does not allow for adding a key prop when a fragment is used in an array/map(), switch to the verbose version and add the key. Therefore `<>...</>` becomes `<React.Fragment key={...}>...</React.Fragment>`. Signed-off-by: Scott J Dickerson <[email protected]> Co-authored-by: Ian Bolton <[email protected]>
konveyor · Dec 7, 2023 · ca600a3 · ca600a3
1 parent f6dc53e
commit ca600a3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/client/src/app/components/answer-table/answer-table.tsx b/client/src/app/components/answer-table/answer-table.tsx
@@ -103,7 +103,7 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
           <Tbody>
             {currentPageItems?.map((answer, rowIndex) => {
               return (
-                <>
+                <React.Fragment key={rowIndex}>
                   <Tr key={answer.text} {...getTrProps({ item: answer })}>
                     <TableRowContentWithControls
                       {...tableControls}
@@ -141,23 +141,21 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
                   </Tr>
                   <Tr>
                     {!!answer?.applyTags?.length && (
-                      <>
-                        <div style={{ display: "flex" }}>
-                          <Text className={spacing.mrSm}>
-                            Apply Tags for this answer choice:
-                          </Text>
-                          {answer?.applyTags?.map((tag, index) => {
-                            return (
-                              <div key={index} style={{ flex: "0 0 6em" }}>
-                                <Label color="grey">{tag.tag}</Label>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      </>
+                      <div style={{ display: "flex" }}>
+                        <Text className={spacing.mrSm}>
+                          Apply Tags for this answer choice:
+                        </Text>
+                        {answer?.applyTags?.map((tag, index) => {
+                          return (
+                            <div key={index} style={{ flex: "0 0 6em" }}>
+                              <Label color="grey">{tag.tag}</Label>
+                            </div>
+                          );
+                        })}
+                      </div>
                     )}
                   </Tr>
-                </>
+                </React.Fragment>
               );
             })}
           </Tbody>

diff --git a/client/src/app/components/questions-table/questions-table.tsx b/client/src/app/components/questions-table/questions-table.tsx
@@ -99,7 +99,7 @@ const QuestionsTable: React.FC<{
                 section.questions.includes(question)
               )?.name || "";
             return (
-              <>
+              <React.Fragment key={rowIndex}>
                 <Tr key={question.text} {...getTrProps({ item: question })}>
                   <TableRowContentWithControls
                     {...tableControls}
@@ -140,7 +140,7 @@ const QuestionsTable: React.FC<{
                     </Td>
                   </Tr>
                 ) : null}
-              </>
+              </React.Fragment>
             );
           })}
         </Tbody>