I am fairly new to React but was wondering if the same restrictions that apply to the regular DOM also apply to the React DOM, in this case uniqueness of HTML element IDs. I am asking because in the code I am working in at the moment I found a checkbox ponent that takes in an ID as a property and sets it on a child element. While this will only render one element in that actual DOM with the ID, in the React DOM there will now be two elements with the ID, the ponent itself will have it in addition to the child element.

const Checkbox = ({
  label,
  name,
  id,
  allowLabelHtml = false,
  checked = false,
  className = "checkbox-element",
  onCheck = () => {},
  onUncheck = () => {},
  onChange = value => (value ? onCheck() : onUncheck()),
  onBlur = () => {},
  labelClass = ""
}) => (
  <div className={className}>
    <input
      id={id}
      name={name}
      type="checkbox"
      className="standard-checkbox-style"
      onChange={() => onChange(!checked)}
      checked={checked}
      onBlur={onBlur}
    />
    {label !== null && (
      <label className={labelClass} htmlFor={name}>
        {label}
      </label>
    )}
  </div>
);

Also here is a screenshot of the React developer tools for chrome DOM explorer thing

I am fairly new to React but was wondering if the same restrictions that apply to the regular DOM also apply to the React DOM, in this case uniqueness of HTML element IDs. I am asking because in the code I am working in at the moment I found a checkbox ponent that takes in an ID as a property and sets it on a child element. While this will only render one element in that actual DOM with the ID, in the React DOM there will now be two elements with the ID, the ponent itself will have it in addition to the child element.

const Checkbox = ({
  label,
  name,
  id,
  allowLabelHtml = false,
  checked = false,
  className = "checkbox-element",
  onCheck = () => {},
  onUncheck = () => {},
  onChange = value => (value ? onCheck() : onUncheck()),
  onBlur = () => {},
  labelClass = ""
}) => (
  <div className={className}>
    <input
      id={id}
      name={name}
      type="checkbox"
      className="standard-checkbox-style"
      onChange={() => onChange(!checked)}
      checked={checked}
      onBlur={onBlur}
    />
    {label !== null && (
      <label className={labelClass} htmlFor={name}>
        {label}
      </label>
    )}
  </div>
);

Also here is a screenshot of the React developer tools for chrome DOM explorer thing

• javascript
• reactjs

• 3 It's the same as HTML, you can technically have multiple elements with the same ID, it just means if you try to fetch/manipulate an element with that ID, it will get the first one and ignore the rest. Which can lead to weird behaviour bugs. So basically, while it still renders, you shouldn't ever have duplicated IDs. – Jayce444 Commented Jun 19, 2018 at 8:31
• Just to add to what @Jayce444 said, unique IDs are also a checklist item on some accessibility audits, so if that's something you deal with or may expect to deal with in the future, it also makes sense to keep them unique. And if you do go ahead and use non-unique IDs, make sure anyone else in the team who might need to know is made aware (for example, testers or analytics people may expect/rely on their uniqueness and have their tools tripped up if duplicates suddenly appear). – delinear Commented Jun 19, 2018 at 8:48
• @Jayce444 Is it mon to fetch elements from or interact directly with the React DOM that way? – Petter Sælen Commented Jun 19, 2018 at 10:51
• No, you shouldn't often need to be fetching them (there's refs in React for referencing elements) and you should never manipulate the DOM directly in React. – Jayce444 Commented Jun 19, 2018 at 11:01

1 Answer 1

In react we rarely use Ids Attributes on ponents. please note that either the React DOM accepts duplicate id or not,on the high level; the page would still be rendered as an html page because the browser only understands html. and the CheckBox ponent might be rendered as a div which would still have the same id as the input element. So my advice is,

• if you are using the id attribute because you want to do styling, then you should use a class attribute.
• if you are using the id attribute as reference to wire-up a function onSubmit or onChange, then you should use a name attribute.

However i found a related post the might help you gain a better understanding through the ments.

Does the className attribute take on the role of the id attribute in Reactjs?