useId
Loading "useId"
Run locally for transcripts
π§ββοΈ I've made a few changes to our
vanilla-tilt app to try and make a reusable
Field component. But there's a problem. When I try to click on the label for
a field, it doesn't focus the input. This is because we're missing an id.I don't want to just use the
name attribute as the id because I don't want
to run the risk of having multiple elements with the same id on the page if
we render multiple Field components with the same name. And I don't want to
have to pass in an id prop every time I use the Field component. Though, if
they do pass an id we should use the id they passed instead of a generated
one (maybe they want a very specific id for some reason and we should support
both!).As usual, you can check my work if you like.
π¨βπΌ So your job is to fix the label association. You'll notice that the checkbox
is working as expected already because it's not using the
Field component due
to its unique structure.So, let's handle the
id in the Field component.
