Fix forwardRef and refactor rendering

components/JobSkillItem/index.tsx

@@ -3,23 +3,25 @@ import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
 import classNames from "classnames"
-
 import PlusIcon from "~public/icons/Add.svg"
 
 import "./index.scss"
 
 // Props
-interface Props {
+interface Props extends React.ComponentPropsWithoutRef<"div"> {
   skill?: JobSkill
   editable: boolean
   hasJob: boolean
 }
 
-const JobSkillItem = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
+  ({ ...props }, forwardedRef) => {
     const router = useRouter()
     const { t } = useTranslation("common")
     const locale =
-    router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+      router.locale && ["en", "ja"].includes(router.locale)
+        ? router.locale
+        : "en"
 
     const classes = classNames({
       JobSkill: true,
@@ -59,24 +61,21 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
       if (props.skill) {
         jsx = <p>{props.skill.name[locale]}</p>
       } else if (props.editable && props.hasJob) {
-      jsx = <p className="placeholder">Select a skill</p>
+        jsx = <p className="placeholder">{t("job_skills.state.selectable")}</p>
       } else {
-      jsx = <p className="placeholder">No skill</p>
+        jsx = <p className="placeholder">{t("job_skills.state.no_skill")}</p>
       }
 
       return jsx
     }
 
-  const skillItem = () => {
     return (
-      <div className={classes} ref={ref}>
+      <div className={classes} onClick={props.onClick} ref={forwardedRef}>
         {skillImage()}
         {label()}
       </div>
     )
   }
-
+)
-  return skillItem()
-})
 
 export default JobSkillItem