Comprendre et utiliser le Hook useId en React

Le hook useId permet de générer un identifiant unique pour un composant dans toute l’application.

Cela peut être particulièrement utile lorsque votre page est composée de plusieurs composants ayant des champs similaires. Pour garantir que chaque champ ait un identifiant unique, vous pouvez utiliser useId.

import { useId } from "react";

export default function App() {
  const componentId = useId();

  return (
    <>
      <div>
        <label htmlFor={"email-" + componentId}>Email</label>
        <input type="text" name={"email-" + componentId} />
      </div>
    </>
  );
}