From fee35ff6bfeb7a39bf1996499a11ac8cb04c4e5e Mon Sep 17 00:00:00 2001
From: Blink Tenor <blinktenor@gmail.com>
Date: Fri, 29 Sep 2023 13:36:00 -0500
Subject: [PATCH 1/2] Fix helper to return an array. Also fix changing value to
 erase down below.

---
 src/components/Monster.tsx        | 37 ++++++++++++++++++-------------
 src/helpers/monsterDataHelper.tsx |  3 ++-
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/Monster.tsx b/src/components/Monster.tsx
index 6d1e828..7aae002 100644
--- a/src/components/Monster.tsx
+++ b/src/components/Monster.tsx
@@ -19,6 +19,8 @@ const Monster: FC<MonsterProps> = ({ parent }) => {
 
   useEffect(() => {
     if (selectedValue) {
+      setParentOptions(undefined);
+      setSelectedParentSet(undefined);
       const parents = getMonsterByName(selectedValue)?.synthesis;
       if (parents) {
         if (Array.isArray(parents[0])) {
@@ -34,6 +36,12 @@ const Monster: FC<MonsterProps> = ({ parent }) => {
     }
   }, [selectedValue]);
 
+  useEffect(() => {
+    if (parentData) {
+      setSelectedParentSet(formatParentString(parentData.synthesis));
+    }
+  }, [parentData]);
+
   const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectedValue(event.target.value);
   };
@@ -43,22 +51,21 @@ const Monster: FC<MonsterProps> = ({ parent }) => {
   };
 
   const formatParentString = (parentArray: Array<string>) => {
-    return parentArray.join(' , ')
+    return parentArray.join(' , ');
   }
 
-  const renderParentSelect = () => {
-    return (
-      <select
-        value={selectedParentSet} 
-        onChange={updateParent} 
-        className="parent-select"
-      >
-       {parentOptions?.map((parents: Array<string>) => (
-          <option key={formatParentString(parents)} value={formatParentString(parents)}>{formatParentString(parents)}</option>
-        ))}
-      </select>
-    );
-  }
+  const renderParentSelect = () => (
+    <select
+      value={selectedParentSet} 
+      onChange={updateParent} 
+      className="parent-select"
+    >
+      <option hidden selected>Select one...</option>
+      { parentOptions?.map((parents: Array<string>) => (
+        <option key={formatParentString(parents)} value={formatParentString(parents)}>{formatParentString(parents)}</option>
+      ))}
+    </select>
+  );
 
   return (
     <div>
@@ -68,7 +75,7 @@ const Monster: FC<MonsterProps> = ({ parent }) => {
           onChange={handleSelectChange} 
           disabled={parent && parentData}
         >
-         {fullList.map((monsterName: string) => (
+          { fullList.map((monsterName: string) => (
             <option key={monsterName} value={monsterName}>{monsterName}</option>
           ))}
         </select>
diff --git a/src/helpers/monsterDataHelper.tsx b/src/helpers/monsterDataHelper.tsx
index 5422861..40a5303 100644
--- a/src/helpers/monsterDataHelper.tsx
+++ b/src/helpers/monsterDataHelper.tsx
@@ -8,7 +8,8 @@ const getMonsterListByParent = (parent: string) => {
     const familyKeys = monsterKeys.filter((monsterName) => monsters[monsterName].family === parent);
     return familyKeys.map((monster_key) => monsters[monster_key].name);
   } else {
-    return monsters[parent];
+    const parentData = monsters[parent];
+    return parentData ? [parentData.name] : undefined;
   }
 }
 

From eab37e76495a0bca93eddf457fbb10467206f5b9 Mon Sep 17 00:00:00 2001
From: Blink Tenor <blinktenor@gmail.com>
Date: Fri, 29 Sep 2023 13:38:52 -0500
Subject: [PATCH 2/2] Null safe

---
 src/components/Monster.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Monster.tsx b/src/components/Monster.tsx
index 7aae002..99b6c88 100644
--- a/src/components/Monster.tsx
+++ b/src/components/Monster.tsx
@@ -51,7 +51,7 @@ const Monster: FC<MonsterProps> = ({ parent }) => {
   };
 
   const formatParentString = (parentArray: Array<string>) => {
-    return parentArray.join(' , ');
+    return parentArray?.join(' , ');
   }
 
   const renderParentSelect = () => (