Fix React key errors

for:

* ChargestList

* util.newlineOrsInString()

Author: monocle

src/frontend/src/components/RecordSearch/Record/RecordSummary/ChargesList.tsx

@@ -11,12 +11,18 @@ export default class ChargesList extends React.Component<Props> {
     const summarizedCharges = Object.entries(
       this.props.eligibleChargesByDate
     ).map(
-      ([eligibilityDate, casesWithHeaderAndChargesNames]: [string, any[]]) => {
+      (
+        [eligibilityDate, casesWithHeaderAndChargesNames]: [string, any[]],
+        summaryIdx
+      ) => {
         const numCharges = casesWithHeaderAndChargesNames.reduce(
           (acc: number, entry: any) => acc + entry[1].length,
           0
         );
-        const listItems = this.buildListItems(casesWithHeaderAndChargesNames);
+        const listItems = this.buildListItems(
+          casesWithHeaderAndChargesNames,
+          summaryIdx
+        );
         const categoryHeader = this.buildCategoryHeader(
           eligibilityDate,
           numCharges
@@ -44,13 +50,16 @@ export default class ChargesList extends React.Component<Props> {
     );
   }
 
-  buildListItems(casesWithHeaderAndChargesNames: any[]) {
-    return casesWithHeaderAndChargesNames.map((entry) => {
+  buildListItems(casesWithHeaderAndChargesNames: any[], summaryIdx: number) {
+    return casesWithHeaderAndChargesNames.map((entry, groupIdx) => {
       const [caseHeaderWithBalance, chargesNames] = entry;
       const listItemsInCase = chargesNames.map(
         ([id, chargeName]: [string, string], index: number) => {
           return (
-            <li key={"chargeItem" + index} className="f6 bb b--light-gray pv2">
+            <li
+              key={"chargeItem" + summaryIdx + "-" + groupIdx + "-" + index}
+              className="f6 bb b--light-gray pv2"
+            >
               <a
                 href={"#" + id}
                 className={
@@ -63,19 +72,12 @@ export default class ChargesList extends React.Component<Props> {
           );
         }
       );
-      if ( caseHeaderWithBalance ) {
-        return (
-          <>
-            <li className="fw7 pt2">{caseHeaderWithBalance}</li>
-            {listItemsInCase}
-          </>
+      if (caseHeaderWithBalance) {
+        return [<li className="fw7 pt2">{caseHeaderWithBalance}</li>].concat(
+          listItemsInCase
         );
       } else {
-        return (
-          <>
-            {listItemsInCase}
-          </>
-        );
+        return listItemsInCase;
       }
     });
   }

src/frontend/src/components/RecordSearch/Record/util.tsx

@@ -8,7 +8,10 @@ export function newlineOrsInString(
 
   let boldSpliced = splittedElements.map((element: string, index: number) => {
     return (
-      <div className={(index > 0 && "bt b--light-gray pt2 mt2") + ""}>
+      <div
+        key={index}
+        className={(index > 0 && "bt b--light-gray pt2 mt2") + ""}
+      >
         {index === 0 ? leading_label : <span className="fw7">OR </span>}
         {convertCaseNumberIntoLinks(element)}
       </div>