Use useId hook where applicable

wojtekmaj · wojtekmaj · commit c9661dcbe676 · 2025-06-18T23:33:03.000+02:00
diff --git a/test/LocaleOptions.tsx b/test/LocaleOptions.tsx
@@ -1,11 +1,16 @@
-import { useRef } from 'react';
+import { useId, useRef } from 'react';
 
 type LocaleOptionsProps = {
   locale: string | undefined;
   setLocale: (locale: string | undefined) => void;
 };
 
 export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) {
+  const localeDefaultId = useId();
+  const localeEnUSId = useId();
+  const localeFrFRId = useId();
+  const localeArEGId = useId();
+  const customLocaleId = useId();
   const customLocale = useRef<HTMLInputElement>(null);
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -38,54 +43,54 @@ export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps)
       <div>
         <input
           checked={locale === undefined}
-          id="localeDefault"
+          id={localeDefaultId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="undefined"
         />
-        <label htmlFor="localeDefault">Auto</label>
+        <label htmlFor={localeDefaultId}>Auto</label>
       </div>
       <div>
         <input
           checked={locale === 'en-US'}
-          id="localeEnUS"
+          id={localeEnUSId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="en-US"
         />
-        <label htmlFor="localeEnUS">en-US</label>
+        <label htmlFor={localeEnUSId}>en-US</label>
       </div>
       <div>
         <input
           checked={locale === 'fr-FR'}
-          id="localeFrFR"
+          id={localeFrFRId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="fr-FR"
         />
-        <label htmlFor="localeFrFR">fr-FR</label>
+        <label htmlFor={localeFrFRId}>fr-FR</label>
       </div>
       <div>
         <input
           checked={locale === 'ar-EG'}
-          id="localeArEG"
+          id={localeArEGId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="ar-EG"
         />
-        <label htmlFor="localeArEG">ar-EG</label>
+        <label htmlFor={localeArEGId}>ar-EG</label>
       </div>
       <form onSubmit={onCustomChange}>
-        <label htmlFor="customLocale">Custom locale:</label>
+        <label htmlFor={customLocaleId}>Custom locale:</label>
         &nbsp;
         <input
           key={locale}
           defaultValue={locale}
-          id="customLocale"
+          id={customLocaleId}
           name="customLocale"
           pattern="^[a-z]{2}(-[A-Z0-9]{2,3})?$"
           ref={customLocale}
diff --git a/test/ValidityOptions.tsx b/test/ValidityOptions.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { getISOLocalDate } from '@wojtekmaj/date-utils';
 
 type ValidityOptionsProps = {
@@ -17,6 +18,10 @@ export default function ValidityOptions({
   setMinDate,
   setRequired,
 }: ValidityOptionsProps) {
+  const minDateId = useId();
+  const maxDateId = useId();
+  const requiredId = useId();
+
   function onMinChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { value } = event.target;
 
@@ -34,9 +39,9 @@ export default function ValidityOptions({
       <legend>Minimum and maximum date</legend>
 
       <div>
-        <label htmlFor="minDate">Minimum date</label>
+        <label htmlFor={minDateId}>Minimum date</label>
         <input
-          id="minDate"
+          id={minDateId}
           onChange={onMinChange}
           type="datetime-local"
           value={minDate ? getISOLocalDate(minDate) : ''}
@@ -48,9 +53,9 @@ export default function ValidityOptions({
       </div>
 
       <div>
-        <label htmlFor="maxDate">Maximum date</label>
+        <label htmlFor={maxDateId}>Maximum date</label>
         <input
-          id="maxDate"
+          id={maxDateId}
           onChange={onMaxChange}
           type="datetime-local"
           value={maxDate ? getISOLocalDate(maxDate) : ''}
@@ -64,11 +69,11 @@ export default function ValidityOptions({
       <div>
         <input
           checked={required}
-          id="required"
+          id={requiredId}
           onChange={(event) => setRequired(event.target.checked)}
           type="checkbox"
         />
-        <label htmlFor="required">Required</label>
+        <label htmlFor={requiredId}>Required</label>
       </div>
     </fieldset>
   );
diff --git a/test/ValueOptions.tsx b/test/ValueOptions.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { getISOLocalDateTime } from '@wojtekmaj/date-utils';
 
 import type { LooseValue } from './shared/types.js';
@@ -8,6 +9,8 @@ type ValueOptionsProps = {
 };
 
 export default function ValueOptions({ setValue, value }: ValueOptionsProps) {
+  const datetimeId = useId();
+
   const [date] = Array.isArray(value) ? value : [value];
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -21,9 +24,9 @@ export default function ValueOptions({ setValue, value }: ValueOptionsProps) {
       <legend>Set date and time externally</legend>
 
       <div>
-        <label htmlFor="datetime">Date and time</label>
+        <label htmlFor={datetimeId}>Date and time</label>
         <input
-          id="datetime"
+          id={datetimeId}
           onChange={onChange}
           type="datetime-local"
           value={date && date instanceof Date ? getISOLocalDateTime(date) : date || undefined}
diff --git a/test/ViewOptions.tsx b/test/ViewOptions.tsx
@@ -1,3 +1,5 @@
+import { useId } from 'react';
+
 type ViewOptionsProps = {
   disabled: boolean;
   renderInPortal: boolean;
@@ -23,6 +25,12 @@ export default function ViewOptions({
   showNeighboringMonth,
   showWeekNumbers,
 }: ViewOptionsProps) {
+  const disabledId = useId();
+  const showLeadingZerosId = useId();
+  const showWeekNumbersId = useId();
+  const showNeighboringMonthId = useId();
+  const renderInPortalId = useId();
+
   function onDisabledChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { checked } = event.target;
 
@@ -58,48 +66,48 @@ export default function ViewOptions({
       <legend>View options</legend>
 
       <div>
-        <input checked={disabled} id="disabled" onChange={onDisabledChange} type="checkbox" />
-        <label htmlFor="disabled">Disabled</label>
+        <input checked={disabled} id={disabledId} onChange={onDisabledChange} type="checkbox" />
+        <label htmlFor={disabledId}>Disabled</label>
       </div>
 
       <div>
         <input
           checked={showLeadingZeros}
-          id="showLeadingZeros"
+          id={showLeadingZerosId}
           onChange={onShowLeadingZerosChange}
           type="checkbox"
         />
-        <label htmlFor="showLeadingZeros">Show leading zeros</label>
+        <label htmlFor={showLeadingZerosId}>Show leading zeros</label>
       </div>
 
       <div>
         <input
           checked={showWeekNumbers}
-          id="showWeekNumbers"
+          id={showWeekNumbersId}
           onChange={onShowWeekNumbersChange}
           type="checkbox"
         />
-        <label htmlFor="showWeekNumbers">Show week numbers</label>
+        <label htmlFor={showWeekNumbersId}>Show week numbers</label>
       </div>
 
       <div>
         <input
           checked={showNeighboringMonth}
-          id="showNeighboringMonth"
+          id={showNeighboringMonthId}
           onChange={onShowNeighboringMonthChange}
           type="checkbox"
         />
-        <label htmlFor="showNeighboringMonth">Show neighboring month's days</label>
+        <label htmlFor={showNeighboringMonthId}>Show neighboring month's days</label>
       </div>
 
       <div>
         <input
           checked={renderInPortal}
-          id="renderInPortal"
+          id={renderInPortalId}
           onChange={onRenderInPortalChange}
           type="checkbox"
         />
-        <label htmlFor="renderInPortal">Render in portal</label>
+        <label htmlFor={renderInPortalId}>Render in portal</label>
       </div>
     </fieldset>
   );
