From 1ee55e23922478ede292224a04863b1a02b2985b Mon Sep 17 00:00:00 2001
From: Amy Chen <amysbubble@Amys-MacBook-Pro-3.local>
Date: Tue, 21 Nov 2023 11:21:28 -0800
Subject: [PATCH] fix react warning

---
 src/components/report/ResponsesSummary.js | 38 ++++++++++++++++++-----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/report/ResponsesSummary.js b/src/components/report/ResponsesSummary.js
index d6ac6fb6b..b26ce1f03 100644
--- a/src/components/report/ResponsesSummary.js
+++ b/src/components/report/ResponsesSummary.js
@@ -101,7 +101,9 @@ export default class ResponsesSummary extends Component {
       <table className={`response-table ${this.state.open ? "active" : ""}`}>
         <thead>
           <tr>
-            <th className="fixed-cell">{`${qid ? qid.toUpperCase(): ""} Questions`}</th>
+            <th className="fixed-cell">{`${
+              qid ? qid.toUpperCase() : ""
+            } Questions`}</th>
             {summaryItems
               .slice(0, endIndex ? endIndex : summaryItems.length)
               .map((item, index) => {
@@ -187,12 +189,19 @@ export default class ResponsesSummary extends Component {
       </td>
     );
   }
-  renderNumResponsesTableCell(summary) {
+  renderNumResponsesTableCell(summary, key) {
     const hasSummary =
       summary && summary.ResponsesSummary && summary.ResponsesSummary.length;
-    if (!hasSummary) return <td className="text-center">--</td>;
+    if (!hasSummary)
+      return (
+        <td className="text-center" key={key}>
+          --
+        </td>
+      );
     return (
-      <td className="text-center">{this.getNumResponses(summary) || "--"}</td>
+      <td className="text-center" key={key}>
+        {this.getNumResponses(summary) || "--"}
+      </td>
     );
   }
   renderResponsesLinkTableCell(lastResponsesDate, key) {
@@ -249,7 +258,10 @@ export default class ResponsesSummary extends Component {
                       `score_cell_${index}`
                     );
                   else if (column.key === "responses_completed")
-                    return this.renderNumResponsesTableCell(summary);
+                    return this.renderNumResponsesTableCell(
+                      summary,
+                      `${column.key}_index`
+                    );
                   else if (column.key === "responses")
                     return this.renderResponsesLinkTableCell(
                       this.getDisplayDate(currentResponses),
@@ -281,7 +293,10 @@ export default class ResponsesSummary extends Component {
               {!columns && (
                 <React.Fragment>
                   {this.renderScoreTableCell(summary, `score_cell`)}
-                  {this.renderNumResponsesTableCell(summary)}
+                  {this.renderNumResponsesTableCell(
+                    summary,
+                    `num_response_cell`
+                  )}
                   {this.renderResponsesLinkTableCell(
                     this.getDisplayDate(currentResponses),
                     "responses_cell"
@@ -303,11 +318,18 @@ export default class ResponsesSummary extends Component {
               // style={{ maxHeight: window.innerHeight - 168 }}
               ref={this.tableWrapperRef}
             >
-              {this.renderResponses(summary.QuestionnaireName, summary.ResponsesSummary)}
+              {this.renderResponses(
+                summary.QuestionnaireName,
+                summary.ResponsesSummary
+              )}
             </div>
           </div>
           <div className="print-only">
-            {this.renderResponses(summary.QuestionnaireName, summary.ResponsesSummary, 3)}
+            {this.renderResponses(
+              summary.QuestionnaireName,
+              summary.ResponsesSummary,
+              3
+            )}
           </div>
         </div>
       </React.Fragment>