From 968970b332b6f643051837765211295c6ef13e8d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 02:46:58 -0800
Subject: [PATCH] Fix errors from props on HTML elements

---
 components/JobSection/index.tsx | 28 +++++++++++++++++++++-------
 components/SelectItem/index.tsx |  6 +++---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index 8411cfbb..0715cf63 100644
--- a/components/JobSection/index.tsx
+++ b/components/JobSection/index.tsx
@@ -127,6 +127,26 @@ const JobSection = (props: Props) => {
     props.saveSkill(skill, position)
   }
 
+  const emptyJobLabel = (
+    <div className="JobName">
+      <h3>{t('no_job')}</h3>
+    </div>
+  )
+
+  const filledJobLabel = (
+    <div className="JobName">
+      <img
+        alt={job?.name[locale]}
+        src={`/images/job-icons/${job?.granblue_id}.png`}
+      />
+      <h3>{job?.name[locale]}</h3>
+    </div>
+  )
+
+  function jobLabel() {
+    return job ? filledJobLabel : emptyJobLabel
+  }
+
   // Render: JSX components
   return (
     <section id="Job">
@@ -146,13 +166,7 @@ const JobSection = (props: Props) => {
             ref={selectRef}
           />
         ) : (
-          <div className="JobName">
-            <img
-              alt={party.job.name[locale]}
-              src={`/images/job-icons/${party.job.granblue_id}.png`}
-            />
-            <h3>{party.job ? party.job.name[locale] : t('no_job')}</h3>
-          </div>
+          jobLabel()
         )}
 
         <ul className="JobSkills">
diff --git a/components/SelectItem/index.tsx b/components/SelectItem/index.tsx
index 12ee6cff..d9964606 100644
--- a/components/SelectItem/index.tsx
+++ b/components/SelectItem/index.tsx
@@ -11,7 +11,7 @@ interface Props extends ComponentProps<'div'> {
 }
 
 const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
-  { children, ...props },
+  { children, value, iconSrc, altText, ...props },
   forwardedRef
 ) {
   return (
@@ -19,9 +19,9 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
       className={classNames('SelectItem', props.className)}
       {...props}
       ref={forwardedRef}
-      value={`${props.value}`}
+      value={`${value}`}
     >
-      {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
+      {iconSrc ? <img alt={altText} src={iconSrc} /> : ''}
       <Select.ItemText>{children}</Select.ItemText>
     </Select.Item>
   )