Avoid Duplicate id Attributes when Reusing Form Components

Instructor: [0:00] We're using our cardForm to add new cards. We're also using it to implement this inline editing capability where we can update a card. This is all great, except we have one small problem. When we associate the labels with the inputs, we're using an ID to do that.

[0:15] When I click on this label, we'll see that the focus goes to the first input with that ID. We have duplicate IDs on the page. For each one of these edit forms that we display, we add another set of duplicate IDs.

[0:28] This is slightly inconvenient when we click on the labels, but it's an incredibly large problem for screen reader users. We want to make sure that we have unique IDs and that our label association with input is correct. Let's go back into our cardForm component and correct this.

[0:43] We're already using a ternary based on the presence of an ID to determine what our heading should be and what our behavior should be. We're going to take the same idea. We're going to carry it forward into the generation of our IDs. Right now, they're hard-coded, so they're always going to match if you have multiple instances of this form on the page.

[1:01] I'm going to update this htmlFor. Instead of just a string, I'm going to use JavaScript expressions. I'm going to replace these double quotes with backticks so that we can use some string interpolation.

[1:13] I'm going to add another underscore. I'm going to switch into JavaScript expressions. I'm going to use my ID as the basis for a ternary. If the ID is present, I'm going to append that to the ID here. That way, they have to be unique because our IDs are unique.

[1:30] Otherwise, I'm just going to append the string new. It'll be card_term_new for our insert form. It'll be card_term and whatever the card's ID is for our edit form. I'm going to take this entire value. I'm going to copy it. I'm going to use that to replace the ID on the text area below.

[1:54] Our term label and our term input will be properly associated, even with multiple instances of the form. We'll avoid duplicate IDs. I'm going to do the same thing for definition. I'll come down here. I'm just going to paste this entire thing. I'm going to replace card_term with card_definition.

[2:17] Copy the whole thing. Then I'll paste that down here for this text area's ID value. I'll go back into the browser. My labels and my inputs are properly associated here. If I flip all of these over, each one of these should have a proper association. We no longer have duplicate IDs on the page.