Reference useId

  • Used to unique id's to custom components
Example - connecting ids to custom elements
WDS Video on this Hook
import React, { useId } from "react"; return ( <Stack alignItems={"center"} sx={{ width: "100%", maxWidth: "40dvw", margin: 2, backgroundColor: "lightblue", padding: 7, borderRadius: 15 }}> <Typography variant="h6" sx={{ marginBottom: 5 }}> Example - connecting ids to custom elements </Typography> <InputExample /> <InputExample /> </Stack> ) } function InputExample() { const id = useId(); return ( <> <label for={`${id}-email`}>email</label> <input id={`${id}-email`} type="email" /> <label for={`${id}-name`}>name</label> <input id={`${id}-name`} type="text" /> </> ); }