title: Label IDs for React
body: <p>So HTML has this awkward problem that to make <code>label</code> work with <code>input</code>, they need to be linked by a matching <code>id</code>/<code>for</code> (renamed by React to <code>htmlFor</code>) pair.</p>
  
  <p>Here's some simplified code with change handles, etc., skipped: </p>
  
  <pre><code>class CheckboxComponent extends Component {
      render() {
        let {selected,name,idkey} = this.props;
        let id = `checkbox-${idkey}`;
        return &lt;div&gt;
          &lt;input type="checkbox" id={id} checked={selected}/&gt;
          &lt;label htmlFor={id}&gt;{name}&lt;/label&gt;
        &lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>Is there any reasonable way to generate those IDs? There are some options but all of them seem really awkward:</p>
  
  <ul>
  <li>Pass unique <code>idkey</code> all the way - but that means not just this component but every parent, grandparent, etc., using it now needs a unique <code>idkey</code>.</li>
  <li>Use <code>Math.random()</code> to generate them - that makes <code>render()</code> non-deterministic, which feels wrong.</li>
  <li>Generate a random key with <code>Math.random()</code> when component gets created/mounted, so <code>render()</code> itself would be deterministic.</li>
  <li>Just turn that whole container into <code>&lt;label&gt;</code> and rewrite the CSS a bit to make it work.</li>
  <li>Give that <code>&lt;label&gt;</code> no <code>for</code> at all, instead some kind of <code>onClick</code> handler to find sibling <code>&lt;input&gt;</code> with DOM API... That's quite straightforward in jQuery-based code, but quite a bit of a mess in React.</li>
  </ul>
  
  <p>Is one of these solutions actually standard practice? Am I missing something else better? </p>