title: Reusable React checkbox component with image without ID
body: <p>I'm trying to make a reusable React component for a checkbox.</p>
  
  <p>Now, I know what a standard image-replacement for a checkbox looks like, so here it is in my React project:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Checkbox extends Component {
    render() {
      return (
        &lt;div className="checkbox"&gt;
          &lt;input type="checkbox" name="thing" value="valuable" id="thing"/&gt;&lt;label for="thing"&gt;&lt;/label&gt; {this.props.text}
        &lt;/div&gt;
      );
    }
  }
  
  export default Checkbox;
  </code></pre>
  
  <p>And here's the general CSS:</p>
  
  <pre><code>input[type=checkbox] {
    display:none;
  }
  
  input[type=checkbox] + label {
    background: url("checked.png") no-repeat;
    background-size: 100%;
    height: 20px;
    width: 20px;
    display: inline-block;
    padding: 0;
  }
  input[type=checkbox]:checked + label {
    background: url("unchecked.png") no-repeat;
    background-size: 100%;
    height: 20px;
    width: 20px;
    display: inline-block;
    padding: 0;
  }
  </code></pre>
  
  <p>Now, because this is React, I want to be able to reuse this component.  But, I can't reuse an ID.  What should I do to make a checkbox with an image replacing the native checkbox?  Is there a way to do this without this "label" method?  <strong>I'd prefer to not use a random number as the ID, or something along those lines.</strong></p>