react-vite-demo

commit 8076d3136fd980b870d7ca6e27b0808bb34efe04
parent 83b0062af079d84132b0c0000662bd8c67594002
Author: Jul <jul@9o.is>
Date:   Wed, 14 Aug 2024 11:21:17 +0800

use react useId()

Diffstat:
M
src/App.tsx
 | 
27
+++++++++++++++++----------

1 file changed, 17 insertions(+), 10 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, ReactNode, useContext, useEffect, useMemo, useState, useId } from 'react'
 import { pipe } from './pipe'
 import './App.css'
 
@@ -92,8 +92,8 @@ const useProgressContext = () => {
 }
 
 const Progress = ({ loading, children }: { loading: boolean, children: ReactNode }) => {
-  const labelId = 'progress-label' // useId()
-  const progressBarId = 'progress-bar' // useId()
+  const labelId = useId()
+  const progressBarId = useId()
 
   return (
     <ProgressContext.Provider value={{ labelId, progressBarId, loading }}>
@@ -137,11 +137,14 @@ type ComboBoxProps = {
 }
 
 const ComboBox = ({ label, name, options }: ComboBoxProps) => {
+  const inputId = useId()
+  const datalistId = useId()
+
   return (
     <>
-      <label htmlFor={`${name}-input`}>{label}</label>
-      <input id={`${name}-input`} name={name} type="text" list={name} />
-      <datalist id={name}>
+      <label htmlFor={inputId}>{label}</label>
+      <input id={inputId} name={name} type="text" list={datalistId} />
+      <datalist id={datalistId}>
         {options.map(option => <option key={option} value={option} />)}
       </datalist>
     </>
@@ -155,10 +158,12 @@ type SelectProps = {
 }
 
 const Select = ({ label, name, options }: SelectProps) => {
+  const id = useId()
+
   return (
     <>
-      <label htmlFor={`${name}-input`}>{label}</label>
-      <select id={`${name}-input`} name={name}>
+      <label htmlFor={id}>{label}</label>
+      <select id={id} name={name}>
         <option value="">Select...</option>
         {options.map(option => <option key={option}>{option}</option>)}
       </select>
@@ -167,10 +172,12 @@ const Select = ({ label, name, options }: SelectProps) => {
 }
 
 const Checkbox = ({ label, name }: { label: string, name: string }) => {
+  const id = useId()
+
   return (
     <>
-      <input id={`${name}-input`} name={name} type="checkbox" />
-      <label htmlFor={`${name}-input`}>{label}</label>
+      <input id={id} name={name} type="checkbox" />
+      <label htmlFor={id}>{label}</label>
     </>
   )
 }