NR-381373

Trying to add an actual exception to the front-end

Author: Calvin Allen

client/src/pages/Error.tsx

@@ -1,20 +1,33 @@
 import pets from '/src/assets/images/pets.png';
 
-export const Error = () => {
-
+const mapping = new Map<number, string>([
+    [1,"Dogs"],
+    [2,"Cats"],
+    [3,"Horses"],
+    [4,"Iguanas"],
+    [5,"Goblin Sharks"]
+])
 
-    const numbers = [0,1,2];
-    const theNumber = numbers[10];
+export const Error = () => {
+    const renderListItem = (index: number) => {
+        const item = mapping.get(index);
+        return (
+            <li>{item}</li>
+        )
+    }
 
-  return (
-    <>
-      <div className="row">
-        <div className="col-md-12">
-          <img className="img-responsive" src={pets} />
-        </div>
-      </div>
-      <h2>Something happened...</h2>
-        <h3>{theNumber}</h3>
-    </>
-  );
+    return (
+        <>
+          <div className="row">
+            <div className="col-md-12">
+              <img className="img-responsive" src={pets} />
+            </div>
+          </div>
+          <h3>
+              <ol>
+                  {[1,2,3,4,5,6].map(i => renderListItem(i))}
+              </ol>
+          </h3>
+        </>
+    );
 };