Avoid Duplicate id Attributes when Reusing Form Components
When we reuse components that rely on HTML id attributes, we run the risk of rendering HTML that results in duplicate IDs in the HTML. IDs are meant to be unique and this is problematic when rendering multiple forms, where IDs are used to make the association between labels and inputs. If this association is broken, it leads to unexpected behavior and is an accessibility issue. In this lesson, we'll look at how we can conditionally assign IDs and ensure that we don't render duplicate IDs, even when rendering several instances of the same form component on the page.
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.