00:00 So here we've got our field and it's being used down here to make some of these inputs a lot easier But we're not associating the label with the input and we can't just say here's my id field And say id or html4 Id and then Id is id

00:22 Like that doesn't work because I click on this and what it is focusing that what's going on here. This is the worst I don't like this. Yeah, you don't want to have ids that don't uh, That aren't unique. That's not a good thing. In fact, we are even getting a warning about that. So We're going to use use id from react

00:40 And now those are going to be unique for each one. We're not getting warnings and it's looking awesome You can take a look at the id that's generated. It's kind of a interesting looking id and interestingly on this you actually can control the Ids that are generated just a bit with the id

01:01 Our identifier prefix so we could yeah sure tilt root our entire application is about the tilt But see now you get this tilt root r zero And so you can if you had like multiple react apps on the same page that does happen Sometimes it's a wild west out there there, but uh, but yeah, you could have them be separate from each other

01:21 You would want to make sure if you're server rendering that you have this identifier prefix be the same On both sides of where you're generating the html and then re-rendering on the client But yeah, that is something that you can do not something. I typically find myself needing to do but a good thing to understand um, nonetheless, so there you go, we have

01:42 Properly associated things and encapsulated the id inside of this field So you don't have to worry about it. Don't have to worry about coming up with a name for stuff Another thing that you might consider is moving this over to this side So that if somebody provides their own id we overwrite it because we're establishing it here even better though would be to

02:05 Pluck off the id off of those input props and then we can reassign the id to be the id that's given or use id This would work and it works fine Eslint and typescript but eslint is complaining that use id is used conditionally And that is true and it could cause problems for us

02:27 And so what we're going to do instead is we'll have a generated Id that is use id and then we'll have our id assigned to Itself or it will fall back to the generated id. So that way we're not calling use id conditionally. It's always called um, but

02:43 We can fall back to the generated id if the id doesn't um already exist. Uh, so with that then Uh, we still have these generating but we could uh, take a look at this one come down here And we could specify our own id right here. We could say id equals max

03:03 Save that and boom now we get our id is max. So You have some options uh with this But that yeah, that's pretty much it the use id hook you call use id you can set the identifier prefix if you want to Um, I actually this pattern is fairly common in uh, the stuff that I do

03:22 I typically allow people to provide their own id if they want to If they don't then I will generate one for them. Uh, and it's all kind of encapsulated in this field component. So There you go. That is unique ids in react apps