Merge pull request #162 from jedmund/fix-job-errors

Fix errors from props on HTML elements

components/JobSection/index.tsx

@@ -158,6 +158,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">

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
 ) {
   const { altText, iconSrc, ...rest } = props
@@ -20,9 +20,9 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
       className={classNames('SelectItem', props.className)}
       {...rest}
       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>
   )