fix: form input elements using uuid causing hydration error

vevcom · Feb 6, 2025 · 5374ffc · 5374ffc
1 parent edde355
commit 5374ffc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/app/_components/UI/Checkbox.tsx b/src/app/_components/UI/Checkbox.tsx
@@ -1,35 +1,39 @@
 import styles from './Checkbox.module.scss'
-import { v4 as uuid } from 'uuid'
 import type { InputHTMLAttributes, ReactNode } from 'react'
 
 
-type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'id'> & {
     label?: string
     children?: ReactNode
-}
+} & ({
+    id: string
+    name?: string | undefined
+} | {
+    name: string
+    id?: string | undefined
+})
 
 /**
- *
  * @param label - The label shown to user (optional)
  * @param children - If given, the children will be clickable as part of checkbox
  * @returns
  */
 function Checkbox({ label, children, ...props }: PropTypes) {
-    props.id ??= `id_input_${uuid()}`
+    const inputId = props.id ?? props.name
 
     return (
         <div id={props.name} className={styles.Checkbox}>
             {
                 children ? (
                     <label className={styles.inputAndChildren}>
-                        <input type="checkbox" {...props} />
+                        <input type="checkbox" {...props} id={inputId} />
                         { children }
                         {label ? label : <></>}
                     </label>
                 ) : (
                     <>
-                        <input type="checkbox" {...props} />
-                        {label && <label htmlFor={props.id}>{ label }</label>}
+                        <input type="checkbox" {...props} id={inputId} />
+                        {label && <label htmlFor={inputId}>{ label }</label>}
                     </>
                 )
             }

diff --git a/src/app/_components/UI/FileInput.tsx b/src/app/_components/UI/FileInput.tsx
@@ -1,5 +1,4 @@
 'use client'
-
 import styles from './FileInput.module.scss'
 import { useState } from 'react'
 import { v4 as uuid } from 'uuid'

diff --git a/src/app/_components/UI/TextInput.tsx b/src/app/_components/UI/TextInput.tsx
@@ -1,16 +1,21 @@
 import styles from './TextInput.module.scss'
-import { v4 as uuid } from 'uuid'
 import type { InputHTMLAttributes } from 'react'
 
 
-export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'id'> & {
     label: string,
     type?: 'text' | 'password',
     color?: 'primary' | 'secondary' | 'red' | 'black' | 'white',
-}
+} & ({
+    id: string,
+    name?: string | undefined,
+} | {
+    name: string,
+    id?: string | undefined,
+})
 
 export default function TextInput({ label = 'default', type = 'text', color = 'black', className, ...props }: PropTypes) {
-    props.id ??= `id_input_${uuid()}`
+    props.id ??= `id_input_${props.name}`
 
     return (
         <div id={props.name} className={`${styles.TextInput} ${styles[color]} ${className}`}>