Fix/results table key error (#22)

* Add reformatted ResultsTable code

- Add spacing to a large line of code to increase readability

* Add fix for key error in ResultsTable

- If there are multiple matches for the highlight method, a key error would occur due to duplicate keys, fix this by using an index counter as part of the key
- An ESLint key rule had to be disabled, however as the UBRN is used as part of the key it shouldn't be an issue

src/components/ResultsTable.js

@@ -9,14 +9,26 @@ import { downloadCSV, downloadJSON } from '../utils/export';
 
 const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, convertBands, businessName }) => {
   // https://stackoverflow.com/questions/29652862/highlight-text-using-reactjs
-  function getHighlightedText(text, higlight) {
+  function getHighlightedText(row, higlight) {
     // Split text on higlight term, include term itself into parts, ignore case
     try {
-      const parts = text.split(new RegExp(`(${higlight})`, 'gi'));
-      return (<span key={text}>{parts.map(part => part.toLowerCase() === higlight.toLowerCase() ? <span key={`${text}-span`} style={{ backgroundColor: '#FFFF00' }}>{part}</span> : part)}</span>);
+      const parts = row.value.split(new RegExp(`(${higlight})`, 'gi'));
+      // We can use the array index as a key as we already use the UBRN as part of the key
+      /* eslint react/no-array-index-key: "off" */
+      return (
+        <span key={row.original.id}>
+          {parts.map((part, i) => (
+              part.toLowerCase() === higlight.toLowerCase() ?
+                (<span key={`${row.original.id}-${i}`} style={{ backgroundColor: '#FFFF00' }}>
+                  {part}
+                </span>)
+              : part),
+            )
+          }
+        </span>);
     } catch (e) {
       // Catch the invalid regular expressions
-      return (<span>{text}</span>);
+      return (<span key={row.original.id}>{row.value}</span>);
     }
   }
   return (
@@ -36,7 +48,7 @@ const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, co
             id: 'businessName',
             accessor: d => d.businessName,
             Cell: row => (
-              (businessName !== '') ? getHighlightedText(row.value, businessName) : row.value
+              (businessName !== '') ? getHighlightedText(row, businessName) : row.value
             ),
           },
           {