title: Pass eslint html-has-for with htmlFor in React
body: <p>I have a stateless React component that looks like this:</p>
  
  <pre><code>const propTypes = exact({
    fieldId: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
  });
  
  function Label({ fieldId, text }) {
    return (
      &lt;label htmlFor={fieldId}&gt;{text}&lt;/label&gt;
    );
  }
  
  Label.propTypes = propTypes;
  </code></pre>
  
  <p>I am using eslint extended with the airbnb config. My eslint looks like this:</p>
  
  <pre><code>{
    "extends": "airbnb"
  }
  </code></pre>
  
  <p>My React code throws this error:</p>
  
  <pre><code>error  Form label must have associated control  jsx-a11y/label-has-for
  </code></pre>
  
  <p>I have clearly set an <code>htmlFor</code> attribute with a valid unique id string (which matches the id on an input elsewhere). Surely this is enough to pass this rule?</p>